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