vue项目配置到服务器后,请求能够成功,返回的数据也能在浏览器中看见,但是报错:
Failed to load http://pre.api.jmxy.mockuai.c...: 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'. Origin 'http://pre.promotion.jmxy.moc...' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
请求状态码为200. 在浏览器中也能看到返回的数据:
下面是requestheader 和 response headers
我配置的axios为:
var instance = axios.create({
baseURL: baseUrl,
timeout: 1000 * 12, // 创建axios实例,设定超时时间是12s
withCredentials: true, // 允许携带cookie
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
}
});
我用的vue 3.0-cli ,然后新建了一个vue.config.js 文件,里面代理设置如下:
devServer: {
open: true,
host: "0.0.0.0", //本地真机测试
// host: "localhost",
port: 8900,
https: false,
hotOnly: false,
disableHostCheck: true,
proxy: {
"/api/": {
target: "http://pre.api.jmxy.mockua.com/",
secure: false,
pathRewrite: {
"^/api/": ""
},
changeOrigin: true,
logLevel: "debug"
}
}
}
但是部署到服务器后,发现请求并不会转发到target的地址,而是直接请求到配置的服务器地址:
http://pre.promotion.jmxy.moc... ,
但是实际接口地址是:http://pre.api.jmxy.mockua.com/
搜了一圈下来都是说要后端那边配置Access-Control-Allow-Origin
为我请求的这个域名,但是后端尝试配置了一下,发现问题并没有解决,而且指定了域名后,这个服务器的其他几个项目就不能正常访问了。 所以想请问下这个问题前端有没有解决的办法,或者后端的解决办法,谢谢各位!
已解决:
解决方法:
withCredentials: false, // 允许携带cookie
在axios里把这一条设置为false就行了,我们的项目是不需要携带cookie的,所以之前的项目后端都没有改过,我刚接手,所以不太清楚,才闹出这个问题,如果需要携带cookie的话,我搜了一圈下来,基本上都和下面几位的回答的是一样的,需要后端配置。
也就是说
Access-Control-Allow-Credentials
设置为true
的情况下Access-Control-Allow-Origin
不能设置为*
MDN_CORS
ps: 关于指定域名 可以在后端用个
array
类似的存一个白名单域名列表如果有请求 先判断
Origin
是否在白名单里 然后再动态设置Access-Control-Allow-Origin