axios请求“跨域”的解决方案

比眉伴天荒 2023-07-12 03:42 39阅读 0赞

背景：

困扰了好几个小时的问题。

启动项目后，页面内容如论如何都不出现，接口没有请求成功。看了一下控制台报了下面错误。

Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: 
    The value of the 'Access-Control-Allow-Origin' header in the response
    must not be the wildcard '*' 
    when the request's credentials mode is 'include'. 
    The credentials mode of requests initiated by the XMLHttpRequest 
    is controlled by the withCredentials attribute.

![截图][20200306183810503.png]

这一看就是`CORS` 跨域啊。。。没仔细看报错吃了大亏。于是解决跨域的方法试了好几种（实际这不是跨域的报错，跨域一般是缺少`Access-Control-Allow-Origin`或者未设置）。

1.  首先就是试了下proxy代理。看了下，我写的有啊。可这种跨域的报错怎么来的呢？
2.  找后台设置`Access-Control-Allow-Origin`，问了后台，他说他已经配置了cors，设置成\*了啊。也不是`Access-Control-Allow-Origin`头设置的原因。

再仔细看下报的错，发现有个`withCredentials` ，报错翻译如下：

**CORS策略已阻止从源“xxx”访问位于“xxx”的XMLHttpRequest：当请求的凭据模式为“include”时，响应中的“Access Control Allow origin”头的值不能是通配符“\*”。XMLHttpRequest启动的请求的凭据模式由withCredentials属性控制。**

晓得了这个类似跨域的报错是由于axios请求设置了`withCredentials`属性引起的。看了下封装的axios，果然有`withCredentials: true`这么一行。  
![截图2][2]

**于是将withCredentials: true注释掉试下，果然这次成功的请求了接口，造孽啊，试了几种方法。竟然是这个东西。看来还是axios没有学好啊。**

## 知识点 ##

1.  报错中隐藏一个知识点，`withCredentials: true`时响应中的`“Access Control Allow origin”`头的值不能是通配符`“*”`。而应该找后端设置将`“Access Control Allow origin”`设置成你的源地址（我的例如http://localhost:9527）。
2.  `Access-Control-Allow-Origin`设置为\*表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求。但是cookie不会出现在http的请求头里。
3.  `withCredentials`设置成`true`时，前端发送请求时就会携带`cookies`。但服务器的响应中没有包含这个头部，那么浏览器就不会把相应交给JavaScript,请求就无法得到结果的数据（浏览器得到了，但是我们请求的方法得不到，因为被浏览器拦截了），因此在需要传`cookies`等时，服务端的`Access-Control-Allow-Origin`必须配置具体的具体的域名。

[20200306183810503.png]: https://img-blog.csdnimg.cn/20200306183810503.png
[2]: https://img-blog.csdnimg.cn/20200306185024953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy,size_16,color_FFFFFF,t_70