vue-cli3配置跨域代理

在vue.config.js中添加devServer.proxy配置

单个接口地址代理配置

module.exports = {
    devServer: {
    	// 配置代理
        proxy: {
            //代理接口前缀为/api的请求
            '/api': { 
                target: 'https://www.lihefei.com', //需要代理到的目标地址
                ws: true,
                changOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '' //重写路径
                }
            }
        }
    }
};

多个接口地址代理配置

module.exports = {
    devServer: {
        proxy: {
            '/api': { 
                target: 'https://www.lihefei.com', 
                ws: true,
                changOrigin: true, 
                pathRewrite: {
                    '^/api': '' 
                }
            },
            '/abc': {
                target: 'https://www.zhangsan.com',
                ws: true,
                changOrigin: true, 
                pathRewrite: {
                    '^/abc': '' 
                }
            },
            '/xyz': {
                target: 'https://www.lisi.com',
                ws: true,
                changOrigin: true, 
                pathRewrite: {
                    '^/xyz': '' 
                }
            }
        }
    }
};

实际应用

假设项目启动后的访问地址是：http://localhost:8080，需要代理访问地址是：https://www.lihefei.com

axios.defaults.baseURL = ''; //baseURL为空时，会默认使用项目地址http://localhost:8080

axios.get('/api/user')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  })
  .then(() => {
    // always executed
  });

浏览器的请求头里的Request URL是：http://localhost:8080/api/user
而代理后实际请求的Request URL是： https://www.lihefei.com/user

参考链接：
Vue CLI 3 本地代理和跨域

Webpack-dev-server的proxy用法