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进行代理。

https://www.jianshu.com/p/f489e7764cb8