axios设置withCredentials导致“跨域”的解决方案

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/HermitSun/article/details/100797223

前两天调接口的时候,出现了一个从来没遇到过的问题。从报错来看,像是跨域:

Access to XMLHttpRequest at '...' from origin '...' 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.

但是一般来说跨域的报错并不是这样,一般是类似于缺少Access-Control-Allow-Origin header的报错。

因为我用的是Vue,就先在vue.config.js的devServer options里配置了proxy,但是没什么效果;后来配置了nginx进行转发,仍然是这个报错,甚至一度让我怀疑我的nginx配置……当然事实上是没错的。而且,我问过后端之后,听说已经配置了cors,按理说不应该报错,这就让我感觉更神秘了。

回去查了一遍代码,发现我在axios里设置了withCredentials: true。看到网上有人这么说:

withCredentials的情况下,后端要设置Access-Control-Allow-Origin为你的源地址,例如http://localhost:8080,不能是*,而且还要设置header(‘Access-Control-Allow-Credentials: true’);

说白了就是后端没允许cookie过去……

另外,Access-Control-Allow-Origin设置为*时cookie不会出现在http的请求头里,所以报错里说Access-Control-Allow-Origin不能是*也是有道理的。

此外还有一个问题,OPTIONS请求无法通过。我们知道,OPTIONS请求是因为前端发送了“非简单请求”,比如Content-Type: 'application/json',如果后端失误(或者根本不知道有OPTIONS这种请求),就有可能把OPTIONS挡住,导致无法通过。在不修改后端的情况下,也是有办法解决这个问题的,就是调整Content-Type: 'application/x-www-form-urlencoded',同时将传输的JSON进行一次序列化(可以用querystring进行转换),这样也能解决问题。

参考资料

  1. 不要再问我跨域的问题了
  2. 踩坑记录-前端请求如果携带Cookie信息,那么后端Access-Control-Allow-Origin不能为*

猜你喜欢

转载自blog.csdn.net/HermitSun/article/details/100797223
今日推荐