还记得在第一次与前端合作开发中就遇到了经典的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", "*")
这个的意思允许所有的跨域,也就是无限制,那为什么会出现这个错误呢,最后测试了半天才发现错误出在这里
如果这样单独一个
"/"
是不可以的,后来我改成了下图就成功跨域了
当然这只是一个例子,代码完全可以更改地没那么冗杂。
结语
综上,我还是建议大家出现CORS跨域问题先检查前端传来的错误再进行操作。
如果有没弄清楚的地方欢迎大家向我提问,我都会尽力解答
这是我的GitHub主页 github.com/L2ncE
欢迎大家Follow/Star/Fork三连