跨域请求报错

Posted 润雨冰雪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域请求报错相关的知识,希望对你有一定的参考价值。

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;
果然之后的请求几乎不会出现这个问题了

以上是关于跨域请求报错的主要内容,如果未能解决你的问题,请参考以下文章

JSONP跨域请求数据报错 “Unexpected token :”的解决办法

关于vue项目请求WCF服务跨域的问题(后台设置)

axios03-解决请求头兼容导致跨域报错问题

vue axios 跨域请求在ie浏览器 报错 Access-Control-Allow-Headers 列表中不存在请求标头 authorization.

产生ajax跨域问题的原因

产生ajax跨域问题的原因