vue.config.js里解决跨域详解(vue-cli 3.0+)

今天下午上班没啥事。研究了下config文件，心得体会如下，给还不太清楚如何在config文件中设置跨域的同学参考参考，不对的地方，欢迎指正。

module.exports = {
  publicPath: '/',       // 项目部署的基础路径 我们默认假设你的应用将会部署在域名的根部
  outputDir: 'dist',     // 构建好的文件的输出地址
  assetsDir: 'static',    // 静态资源打包的地址
  lintOnSave: process.env.NODE_ENV === 'development',   // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' ,设置为error时，检查出的错误会触发编译失败
  productionSourceMap: false,     // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度  映射文件 打包时使用
  devServer: {      // 设置跨域
    port: '9527',      // 端口号
    open: true,     // 配置自动启动浏览器
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {       // 代理服务器设置
      /**
       * 原理理解： 假设我的本地地址为: http://192.168.163.100:9527 (即http://localhost:9527)
       *            服务器地址为: http://11.12.11.205:9301;
       *            该服务器上的接口为：/api/xxx/xxx
       *            如果我通过axios将接口直接写成
       *            axios.get(http://11.12.11.205:9301/api/xxx/xxx)
       *            那么这个时候从http://192.168.163.100:9527 到 http://11.12.11.205:9301/api/xxx/xxx
       *            是存在跨域限制的。
       *
       *            所以，项目中在设置axios时是这样做的
       *            1. 设置了一个baseURL 为process.env.VUE_APP_BASE_API, 即'/api'
       *            2. 将axios的接口写成 baseURL+ 接口路径，即 /api +/api/xxx/xxx  (axios会在url前面加上配置的baseURL)
       *            3.请求的时候 浏览器上显示的是http://localhost:9527/api/api/xxx/xxx
       *            4.因为有config里面的代理设置，即遇到'/api'，将它前面的地址代理到http://11.12.11.205:9301，并且允许跨域
       *            5. 并且将'/api'重写为''，即http://localhost:9527 变为了http://11.12.11.205:9301，'/api'变为了''
       *            6. 那么现在请求到的地址变为http://11.12.11.205:9301/api/xxx/xxx
       *            7. 即成功代理给我们要访问的服务器，并解决了跨域问题
       */
      // process.env.VUE_APP_BASE_API      '/api'
      [process.env.VUE_APP_BASE_API]: { // 当遇到'/api'的时候
        target: `http://11.12.11.205:9301`, // 需要将目前的地址代理至target
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '' // 将'/api' 重写为''
        }
      },
      [process.env.VUE_APP_BASE_FILES]: {
        target: `http://11.12.11.205:9300`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_FILES]: ''
        }
      }
    }
  }
}