Vueのvue.config.js的代理devServer.proxy配置，解决开发环境跨域问

背景

在做steampy市场(https://steampy.com), 在实现前端应用和后端 API 服务器没有运行在同一个主机上，需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

问题

Access to XMLHttpRequest at 'http://steampy.com/log'(redirected from 'http://127.
0.0.1:9999/getTrad') from origin 'http://127.0.0.1:8080'has been blocked by
 CORS policy: Response to preflight request doesn't pass access control 
check: Redirect is not allowed for a preflight request.

分析问题

通常vue.config.js 配置普通代理方式

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '',   //要访问的跨域的域名
        ws: true,  // 是否启用websockets
        changeOrigin: true //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
      },
      '/foo': {
        target: ''
      }
    }
  }
}

解决方法

module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/api': {
                target: 'https://steampy.com/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': '' // 思路是如果是开发环境，就给所有要代理的接口统一加上前缀，然后代理请求时再统一通过rewrite去掉
                }
            },
            '/foo': {
                target: ''
            }
        }
    }
}

注意

1. 一般大家在proxy 中配置了 target,ws,changeOrigin等，我这里添加了（ pathRewrite: {'^/api': '' }）才解决问题
2. pathRewrite: { '^/api': '' } , 如果是开发环境，就给所有要代理的接口统一加上前缀，然后代理请求时再统 一通过rewrite去掉, 如果是生成环境下，就可以不用添加了.
3. 同时检查服务器端是否配置了，跨域解决代码. 需要前后端配合解决。
   （大家一般出现问题都是第三部，服务器端不支持，你是如何都无法通过请求的，一定知悉.）