六, 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.  同时检查服务器端是否配置了，跨域解决代码. 需要前后端配合解决。

以上配置就这么多，如果还有问题，可以加入扣扣群：316567839