Vue开发环境中配置devServer

简述

在使用Axios时，在本地开发通常会出现跨域问题，解决方法也很简单。

在开发环境下，可以通过配置Vue.config.js中的module.exports中devServer来解决。

注：生产环境无效，没见dev打头么，生产环境给axios配置baseURL，打包完给后端解决去

简单配置

直接按照下述配置代理，即可通过代理实现跨域。

此时要注意，请求URL要去掉协议、域名和端口号，直接使用/api即可

module.exports = {
    outputDir:"XXX",
    devServer: {
        open: false,    // 是否自动打开网页
        port: 3344,    // 自定义端口

        // 在此处配置代理IP，实现跨域
        proxy: 'http://11.111.11.111:5501/',
    }
}

详细配置

使用上述方法有一些缺点

1.不能配置多个代理

2.不能灵活的控制请求是否走代理。

所以可以使用更详细的配置来对代理做描述

module.exports = {
      devServer: {        
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://11.111.11.111:5000',// 代理目标的基础路径
        
        // changeOrigin设置为true时，服务器收到的请求头中的host为http://11.111.11.111:5000
        // 设置为false时，服务器收到的请求头中的host为http://localhost:8080
        // 默认设置为true
        changeOrigin: true, 
        pathRewrite: {'^/api1': ''} // 重写路径
      },
      '/api2': {
        target: 'http://22.222.22.222:5001',
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}