vue-cli配置反向代理解决跨域问题及过程详解

vue 专栏收录该内容
8 篇文章 0 订阅

vue-cli配置反向代理

vue-cli提供了配置反向代理的接口,即设置config/index.js中的proxyTable。配置如下:

组件中调用接口示例(axios)

上述示例请求的地址会被解析为http://moby.xbotech.com/api/login。如果proxyTablepathRewrite配置为空,则请求的地址被解析为http://moby.xbotech.com/login

以上配置只是在开发环境(dev)中解决跨域。要解决生产环境的跨域问题,则在config/dev.env.jsconfig/prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址。配置代码如下: 

对反向代理解决跨域过程的理解

 

如图,浏览器中请求的urlhttp://localhost:8081/api/portal/order/queryOrderRow?orderNumber=4015
我实际请求的urlhttp://localhost:8080/portal/order/queryOrderRow?orderNumber=4015
本地项目通过http://localhost:8081/#/在浏览器中进行访问。

通过伪造请求使得http请求为同源的,然后将同源的请求发送到反向代理服务器上,由反向代理服务器去请求真正的url,这样就绕过直接请求真正的url导致跨域问题。

  • 7
    点赞
  • 8
    评论
  • 27
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值