React与Gin-Gonic Gin的跨域解决方案

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《React与Gin-Gonic Gin的跨域解决方案》，以下内容主要包含等知识点，如果你正在学习或准备学习Golang，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

我在开发环境中，在react前端和go-lang gin-gonic框架之间实现跨源资源共享时遇到了问题，下面是来自浏览器的控制台日志

发送 post 请求的 react 应用程序的控制台日志

这是从go框架接收到的请求，可以看出，预检请求没有经过验证

我尝试了两种方法，一种是验证预检请求并在反应选项上传递 200，如下所示

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{}{})
}

这个黑客没有帮助，此外，我在访问控制允许来源中包含了一个带有通配符域的中间件，以及如下所示的 http://localhost:3000

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()
    }
}

我还尝试了 gin cors 包，如 github.com/gin-contrib/cors 所示，但请求仍然被阻止

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",
            })
        })
    }

go版本为go版本go1.18.1 linux/amd64

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

正确答案

尝试在handlefunc之前移动cors中间件

示例：

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
}

本篇关于《React与Gin-Gonic Gin的跨域解决方案》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于Golang的相关知识，请关注golang学习网公众号！