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