vue-cli3跨域代理不生效

问题

按照官方介绍在devServer下配置了proxy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}

但是却死活不生效,依然报:

1
Access to XMLHttpRequest at 'http://aaa' from origin 'http://bbb' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决

之前一直认为是路径没映射对或是配置放的位置不对,但比较关键的其实是官方文档中的一句话:

readme

也就是说需要进行跨域访问的api接口域名应该跟vue-cli本地启动的服务器域名保持一致,当服务器发现能匹配到静态资源的时候就内部消化,返回静态资源,而当请求不到的时候才会换用配置的代理域名进行转发访问。

所以回到axios的axios.defaults.baseURL属性配置,就应该跟本地启动的资源服务器保持一致,而不应该填成api真实的域名地址

比如devServer的配置是:

1
2
3
4
5
6
7
8
9
10
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8888,
https: false,
hotOnly: false,
proxy: http://127.0.0.1:9000,
disableHostCheck: true,
before: app => {}
}

那axios的属性配置应该就是:

1
axios.defaults.baseURL = http://127.0.0.1:8888'

接口请求的代码为:

1
let resp = await axios.get('/api/echo');

浏览器访问的地址为:

1
http://127.0.0.1:8888/testcors