Cors React and Gin-Gonic Gin

I have run into a problem implementing cross origin resource sharing in the development environment, between a react front end and Go-lang Gin-Gonic framework, below is the console log from the browser

Console log from the react application sending a post request

This is the received request from the Go framework, as can be seen, the preflight request is not validated

I have attempted two hacks, one is validating the preflight request and passing a 200 on the react OPTIONS as seen below

func preflight(c *gin.Context) {
	c.Header("Access-Control-Allow-Origin", "*")
	c.Header("Access-Control-Allow-Headers", "access-control-allow-origin, access-control-allow-headers")
	c.JSON(http.StatusOK, struct{}{})
}

This hack was not of help, additionally ,i included a middleware with a wildcard domain in the access control allow origin, as well as with http://localhost:3000 as shown below

func CORSMiddleware() gin.HandlerFunc {
	return func(c *gin.Context) {

		c.Header("Access-Control-Allow-Origin", "*")
		c.Header("Access-Control-Allow-Credentials", "true")
		c.Header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With")
		c.Header("Access-Control-Allow-Methods", "POST,HEAD,PATCH, OPTIONS, GET, PUT")

		if c.Request.Method == "OPTIONS" {
			c.AbortWithStatus(204)
			return
		}

		c.Next()
	}
}

I also tried the gin cors package as shown here github.com/gin-contrib/cors but the request is still being blocked

These are part of my routes 

	r := gin.Default()
	//r := gin.New()

	config := cors.DefaultConfig()
	config.AllowOrigins = []string{"*"}
	// config.AllowOrigins = []string{"http://google.com", "http://facebook.com"}
	// config.AllowAllOrigins = true
	r.Use(cors.New(config))

	//system routes
	router.NotFound(r)
	router.NoMethods(r)

	//static routes
	router.ServeStatic(r)
Methods 

func NotFound(route *gin.Engine) {
	route.NoRoute(func(c *gin.Context) {
		c.JSON(404, gin.H{"msg": "Not Found"})
	})
}

func NoMethods(route *gin.Engine) {
	route.NoMethod(func(c *gin.Context) {
		c.JSON(405, gin.H{"msg": "Not allowed"})
	})
}

//Serve frontend static files

func ServeStatic(route *gin.Engine) {
	route.Use(static.Serve("/", static.LocalFile("./views/public", true)))
	route.Use(auth.CORSMiddleware())
	api := route.Group("/api")

	{
		api.GET("/", func(c *gin.Context) {
			c.JSON(http.StatusOK, gin.H{
				"message": "pong",
			})
		})
	}

The go version is go version go1.18.1 linux/amd64

"axios": "^0.24.0",
"react": "^18.1.0",

Try to move CORS middleware before your handleFunc

Example:

func (h *Handler) InitRoutes() *gin.Engine {
    router := gin.New()

    router.Use(h.setHeaders)

    router.GET("/", h.getRecordsByFilter)
    router.GET("/:uuid", h.getRecordByUuid)
    router.POST("/", h.createRecord)
    router.PUT("/:uuid", h.updateRecord)
    router.DELETE("/:uuid", h.deleteRecord)

    return router
}

The problem was with credentials true from the react front-end

handleSubmit(event) {
    const {email,password} = this.state;
    axios.post("http://localhost:3000/auth/register",
    {email: email, password: password},{
        withCredentials: true}).then(response => {
            console.log("registration res", response);
            console.log("response data",response.data);
        }).catch(error => {
            console.log("registratino error", error);
        });


    event.preventDefault();
}