vue-cli3 axios配置代理

因为react配置代理怎么都不成功，所以研究了一下代理，发现可以反用在我的vue项目下😂😂😂

vue-cli3配置代理方式

我们知道vue-clli3所有的配置文件都放到 vue.config.js 里，所以代理当然也是这么配置了。具体文档.

module.exports = {
  // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
  devServer: {
    proxy: {
      // 静态图片资源(因为放到了CDN上)
      '/static': {
        target: 'https://static.xxx.com',
        changeOrigin: true,
        secure: true
      },
      // 请求接口
      '/test': {
        target: 'https://ceshi.xxx.cn',
        changeOrigin: true,
        secure: true,
        // remove path
        pathRewrite: { '^/test': '' }
      }
    }
  }
}

axios配置baseURL

因为之前代理里请求头有 /test，所以axios可以通过配置 baseURL 来最小化增加代理

let axiosInstance = axios.create({
	baseURL: 'test'
});

原理

（上面的代码如果解决问题了，这部分就可以略过了。）

1. 代理原理
   代理捕获的路径会自动以 当前所在环境 为基础的，如果在本地启动，那么请求路径就是 http://localhost:8080/request

2. 但是如果axios配置了 baseURL ，那么请求路径就变为了 http://localhost:8080/[baseURL]/request

3. 捕获的 /request 就失去作用了，这个时候可以更换捕获 baseURL，这样就可以完成代理。

引申
是否可以推出 baseURL 的设计意图：

1. 为了axios跨域使用，修改前面请求链接
2. 为了便于配置代理，避免每一个接口前缀都匹配一遍，匹配一个 baseURL 即可

参考链接

[1] chimurai http-proxy-middleware配置options
[2] Vue CLI文档 devserver-proxy