GIN框架"No 'Access-Control-Allow-Origin' header is present 错误

  • Z时代
  • 2024-01-10
  • 分类：IT

最近用Golang的GIN框架+Vue写了一个前后端分离的博客.
用Go的第三方包cors创建了一个中间件，代码如下:

package middleware
import (
    "time"
    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)
// 跨域
func Cors() gin.HandlerFunc {
    return cors.New(
        cors.Config{
            AllowAllOrigins:  true,
            AllowMethods:     []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
            AllowHeaders:     []string{"*"},
            ExposeHeaders:    []string{"Content-Length", "text/plain", "Authorization", "Content-Type"},
            AllowCredentials: true,
            MaxAge:           12 * time.Hour,
        },
    )
}

image
可以看到后端已经返回了数据给浏览器。但浏览器因为Cors协议阻止数据在页面显示
image.png

这是我从码云上找到的，一摸一样的写法
ginbloger

登录的页面没有报这个跨域错误，查了很多的资料也找不到具体原因。而且我看其他人也是这样写的，他们运行就可以。想不明白，求指教。

回答：

cors要配置在启动9090端口的那个服务上。

回答：

每一个跨域肯定都不一样啊，服务端的AllowHeaders需要填写明确的客户端请求的请求头。跨域的实际上就是：

  1. 网址不同，浏览器产生跨域
  2. 向服务端发送一个options请求
  3. 服务端返回跨域所需要的请求头，包含自定义
  4. 客户端发送真实的请求
  5. 服务端第一次返回的允许的请求头与正式请求的请求头要一致才可以成功

回答：

跨域请求头里要包含origin，另外可以看下响应里Access-Control-Allow-Origin值是什么，如果运行所有域名请求的话值就应该是*，如果只允许你的域名请求值就应该是你的域名，下面是一个cors中间件例子

// 运行请求的域名
var hosts = []string{
    "xxx.com",
}
// CORS 跨站资源共享
func CORS(c *gin.Context) {
   origin := c.GetHeader("Origin")
   allowed := origin == ""
   if !allowed {
      originURL, err := url.Parse(origin)
      if err != nil {
         c.AbortWithStatus(http.StatusNoContent)
         return
       }
      originHostName = originURL.Hostname()
   }
   if !allowed {
      for _, h := range hosts {
         if strings.HasSuffix(origin, h) || strings.HasSuffix(originHostName, h) {
            allowed = true
            break
        }
      }
   }
   if !allowed {
      c.AbortWithStatus(http.StatusNoContent)
      return
  }
  c.Header("Access-Control-Allow-Origin", origin)
  c.Header("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE,OPTIONS")
  c.Header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, Authorization, accept, origin, Cache-Control")
  c.Header("Access-Control-Allow-Credentials", "true")
  if c.Request.Method == "OPTIONS" {
     c.AbortWithStatus(http.StatusNoContent)
     return
   }
   c.Next()
}

以上是 GIN框架"No 'Access-Control-Allow-Origin' header is present 错误 的全部内容， 来源链接： utcz.com/p/183488.html

回到顶部