vue跨域配置

说明:这里的vue代理是指用vue静态服务器做代理。使用的是http-proxy-middleware这个模块(这个模块相当于是node.js的一个插件)。

修改文件位置:根目录下的vue.config.js

devServe:{
   proxy:{
      '/api':{
               target:'http://192.168.123.123:8080', //后台接口地址
               ws:true, //如果要代理 websockets,配置这个参数
               secure:false,     //如果是https接口,需要配置这个参数
               changeOrigin:true, //是否跨域
               pathRewrite:{         //重写路径
                            '^/api':''
                           }
             }
   }
}

'/api'为请求前缀,可以改成其他名字
例如: /api/xxxx/xxx
node服务器 遇到 以 '/api'开头的请求,就会把 target 字段里的值加上,那么请求地址就为变成了http://192.168.123.123:8080/api/xxxx/xxx

pathRewrite为路径重写, 表示的意思是 把/api 替换为 空,那么请求地址就为 http://192.168.123.123:8080/xxxx/xxx

在本地查看地址的时候,地址不会更改,还是http://localhost:8080/api/xxx/xxxxx,看起来/api和target的地址没有替换,但实际已经替换了。

ws用于支持websockets

devServer中,proxy的changeOrigin是false:请求头中host仍然是浏览器发送过来的host;如果设置成true:发送请求头中host会设置成target。

在vue-cli3中,默认changeOrigin的值是true,意味着host设置成target,这与cue-cli2不一致,vue-cli2这个默认值是false

 

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值