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
原文地址:https://www.cnblogs.com/Wuser/p/13356300.html