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

背景：

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

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

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.

这一看就是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这么一行。

于是将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必须配置具体的具体的域名。