乐趣区

关于前端:跨域请求报错

jiezi

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;
果然之后的申请简直不会呈现这个问题了

退出移动版