vue开发过程中跨域问题解决
0x00 简介
我们在进行vue的开发过程中经常会遇到跨域问题，
常用的解决方法是通过devServer代理做接口的转发。
0x01 配置
创建配置文件
在vue目录下创建如下文件：
填写配置文件
const proxyObj = {}
proxyObj['/api'] = {
ws: false,
target: 'http://ip:1234',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
proxyObj['/file'] = {
ws: false,
target: 'http://ip:4567',
changeOrigin: true,
pathRewrite: {
'^/file': '' #路径重写，当匹配到/file路径，转发时去掉/file
}
}
module.exports = {
devServer: {
host: 'localhost',
port: 80,
proxy: proxyObj
}
}
# 假设当你在前端访问http:/localhost:80/file/upload时，node会启动一个代理服务器进行转发，进行转后相当于访问http://ip:4567/upload，以此来解决跨域问题
参数介绍
target：要使用url模块解析的url字符串
forward：要使用url模块解析的url字符串
agent：要传递给http（s）.request的对象（请参阅Node的https代理和http代理对象）
ssl：要传递给https.createServer（）的对象
ws：true / false，是否代理websockets
xfwd：true / false，添加x-forward标头
secure：true / false，是否验证SSL Certs
toProxy：true / false，传递绝对URL作为路径（对代理代理很有用）
prependPath：true / false，默认值：true - 指定是否要将目标的路径添加到代理路径
ignorePath：true / false，默认值：false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您必须附加/手动）。
localAddress：要为传出连接绑定的本地接口字符串
changeOrigin：true / false，默认值：false - 将主机标头的原点更改为目标URL
0x02 参考
注意vue项目打包后，devServer代理将失效，生产环境中我们经常使用nginx进行代理。
