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