跨域请求报错

润雨冰雪 · · 691 次点击 · · 开始浏览

这是一个创建于的文章，其中的信息可能已经有所发展或是发生改变。

Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
相信这个问题大家都不陌生，当然解决的方式也很简单，只需要在后端的服务的响应头加上如下配置
Access-Control-Allow-Origin --> true

之后可能问题就解决了，万事大吉，但是如果加了还是仍然报错，有的同学可能就会疑惑了，what？why？个人也遇到了这样的问题，下面就跟大家详细说一下。

下面贴一段golang后端代码

package main
import (
   "github.com/gin-gonic/gin"
 "net/http")
//CORS for cross-origin resource controlfunc CORS() gin.HandlerFunc {
   return func(c *gin.Context) {
      method := c.Request.Method
 c.Header("Access-Control-Allow-Origin", "*")
      c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token,Authorization,Token,Client-type")
      c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, PATCH, DELETE")
      c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
      c.Header("Access-Control-Allow-Credentials", "true")
      // 放行所有OPTIONS方法，因为有的模板是要请求两次的
 if method == "OPTIONS" {
         c.AbortWithStatus(200)
      }
      c.Next()
   }
}
func main() {
   r := gin.Default()
   r.Use(CORS())
   r.GET("/test", func(c *gin.Context) {
      //do something
 c.JSON(http.StatusOK, gin.H{"code": 0})
   })
   r.Run(":8888")
}

可以看到这里是加了相关的头信息，但是当前端同事访问这个接口的时候还是看到了跨域错误，而且最让人疑惑的是，这个报错有时候有，有时候没有。笔者当时遇到这个问题，也是一脸问号。不过，事出幺蛾必有因。当时的情况是，报错的接口响应时间都很长，几乎都是在等待10s的时候看到了跨域错误。因此，笔者就考虑应该是因为超时导致的这个问题。几乎现在所有的服务都会反向代理，笔者当时使用的是nginx，所以笔者猜想，应该是ngxin在10s的时候直接返回了超时，然后这个请求相当于数据不是后端服务返回的，由nginx直接返回的，然后nginx刚好没有设置跨域请求需要的头信息，所以结果到达前端就成为了跨域问题。然后查看nginx配置，验证猜想，果然看到了如下配置
proxy_read_timeout 10;

然后查看nginx错误日志
[error] 68907#0: *22 upstream timed out (60: Operation timed out) while reading response header from upstream, client: 127.0.0.1, server: cors.example.com, request: "GET /test HTTP/1.1", upstream: "http://127.0.0.1:8888/test", host: "cors.example.com", referrer: "http://localhost:63342/"

这下印证猜想是正确的

然后修改一下配置
proxy_read_timeout 30;
果然之后的请求几乎不会出现这个问题了

有疑问加站长微信联系（非本文作者）