跨域测试代码 - console 里面直接就可以测试

跨域测试代码 - console 里面直接就可以测试

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.baidu.com");
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

Access-Control-Allow-Origin:* 如何写代码才不跨域 axios get

说是不携带cookie，得写个前后台验证一下，为什么我写的 axios.request 就报跨域了。

// withCredentials 表示跨域请求时是否需要使用凭证

withCredentials: false, // default

axios修改origin

https://blog.51cto.com/u_16099164/6619670

第一个坑：

No ‘Access-Control-Allow-Origin’ header

后端解决方案：这一步前端还不需要做啥，后端在响应头中把“Access-Control-Allow-Origin”设置为“*”，这是大家最熟悉的解决方案了。

第二个坑：

登录前的页面一切正常，登录后的页面，也就是需要携带cookie请求的页面，就会出现401报错，即用户没有访问权限，需要进行身份认证，说白了就是没有携带cookie请求后端。

前端解决方案：这是axios的坑，axios发送请求默认不携带cookie，需要前端设置一下。这个是全局配置的axios，每次请求的时候配置也行，但全局更方便一点。

登录后复制

axios.defaults.withCredentials = true;

后端解决方案：

同时，后端也需要配合修改，因为前端设置了withCredentials为true，后端的’Access-Control-Allow-Origin’不允许再使用通配符“”（根据报错的字面意思），否则又会出现跨域问题。跨域报错信息：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’.

第三个坑：

前端接收到后端的响应头中有Set-Cookie，但就是没有写入浏览器的cookie中，所以还是无法请求到需要携带cookie的页面。

此时的跨域报错信息：The ‘Access-Control-Allow-Origin’ header has a value that is not equal to the supplied origin. 而且如果前后端运行在同一台电脑上就没有这个问题，如果不在同一台电脑上，比如后端在服务器上，前端在本地，就有这个问题。