需要在后端设置跨域请求
//设置允许跨域请求函数
func cors() gin.HandlerFunc {
return func(context *gin.Context) {
method := context.Request.Method
orgin := context.Request.Header.Get("Origin")
if orgin != "" {
//接收客户端发送的origin (重要!)
context.Writer.Header().Set("Access-Control-Allow-Origin", orgin)
//服务器支持的所有跨域请求的方法
context.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE")
//允许跨域设置可以返回其他子段,可以自定义字段
context.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token, session, Content-Type")
// 允许浏览器(客户端)可以解析的头部 (重要)
context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers")
//设置缓存时间
context.Header("Access-Control-Max-Age", "172800")
//允许客户端传递校验信息比如 cookie (重要)
context.Header("Access-Control-Allow-Credentials", "true")
}
//允许类型校验
if method == "OPTIONS" {
context.JSON(http.StatusOK, "ok!")
}
defer func() {
if err := recover(); err != nil {
fmt.Printf("Panic info is: %v\n", err)
}
}()
context.Next()
}
}
调用这个函数即可
axios({
methods: 'post',
url:`api/CRUD/regis`,
data:data,
headers:{"Content-Type":"application/application/json"}
})
2 条评论
非常感谢,终于解决这个问题了,我在vue上配置了半天没解决这个跨域,我先歇会,等会研究一下原理。
这是源自服务端的设置问题,浏览器通常会进行通信拦截,除非服务器允许,vue前端也可通过代理请求来绕过跨域问题