vue中配置proxy代理

经常遇到一个问题就是本地请求线上服务器报错cros 跨域无法请求

这个时候还需要联系后端小哥帮忙解决跨域。如下记录vue中使用proxy进行配置

Vue DevServer 配置方法

在vue.config.js中配置

devServer: {
    proxy: 'http://ip:prot'  // 所有流量直接发送到这里
}

最基本配置

devServer: {
    '/api': {
        target: 'http://ip:prot' // 前端请求的以 /api 的请求地址会被转发到 target写入的地址里面
     }
}

重写

devServer: {
    '/manager': {
        target: 'http://ip:prot',
        pathRewrite:{
         // 重写路径
          "^/manager": "", // 把/manager变为空字符
        }
     }
}

多配置

devServer: {
    '/api': {
        target: 'http://ip:prot' 
     }
    '/user': {
        target: 'http://ip:prot'
     }
}

changeOrigin:true 解决跨域错误

secure:true 忽略https错误提示

补齐以下内容↓

target："xxx",            // 使用url模块解析的url字符串
forward："xxx",           // 使用url模块解析的url字符串
changeOrigin：true/false, // 默认值:false 将主机标头的原点更改为目标URL
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："xxx",      // 要为传出连接绑定的本地接口字符串
agent：{},                // 传递给http(s).request的对象
ssl：{},                  // 传递给https.createServer()的对象