Go语言在Gin框架下开发中CORS跨域问题的解决方法

还记得在第一次与前端合作开发中就遇到了经典的CORS跨域错误,首先我们得需要知道什么是CORS跨域问题

CORS跨域问题

CORS 全称 Cross-Origin Resource Sharing,即跨域资源共享。

CORS 是一种基于 HTTP Header 的机制,该机制通过允许服务器标示除了它自己以外的其它域。服务器端配合浏览器实现 CORS 机制,可以突破浏览器对跨域资源访问的限制,实现跨域资源请求。

跨域不一定会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是于当前页同域名的路径,这能有效的阻止跨站攻击。

解决方案

既然我们在Gin框架的加持下进行开发,那最好的解决方案就是添加一个CORS

//中间件
//CORS 跨域中间件
func CORS() gin.HandlerFunc {
    return func(ctx *gin.Context) {
        ctx.Writer.Header().Set("Access-Control-Allow-Origin", "*")
        ctx.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
        ctx.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With, token, x-access-token")
        ctx.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT, DELETE")

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


//路由
engine := gin.Default()
engine.Use(CORS())
err := engine.Run()

但是这样后依然出现了CORS错误,错误原因以下

出现这个错误后人一下麻了,因为在中间件中我们已经使用了Set("Access-Control-Allow-Origin", "*")

这个的意思允许所有的跨域,也就是无限制,那为什么会出现这个错误呢,最后测试了半天才发现错误出在这里

image.png 如果这样单独一个"/"是不可以的,后来我改成了下图就成功跨域了

image.png 当然这只是一个例子,代码完全可以更改地没那么冗杂。

结语

综上,我还是建议大家出现CORS跨域问题先检查前端传来的错误再进行操作。

如果有没弄清楚的地方欢迎大家向我提问,我都会尽力解答

这是我的GitHub主页 github.com/L2ncE

欢迎大家Follow/Star/Fork三连

猜你喜欢

转载自juejin.im/post/7114216333700677640
今日推荐