vue-cli提供了配置反向代理的接口,即设置config/index.js
中的proxyTable
。配置以下:vue
组件中调用接口示例(axios)ios
上述示例请求的地址会被解析为http://moby.xbotech.com/api/login
。若是proxyTable
中pathRewrite
配置为空,则请求的地址被解析为http://moby.xbotech.com/login
。vue-cli
以上配置只是在开发环境(dev)中解决跨域。要解决生产环境的跨域问题,则在config/dev.env.js
和config/prod.env.js
里也就是开发/生产环境下分别配置一下请求的地址API_HOST
,开发环境中咱们用上面配置的代理地址api,生产环境下用正常的接口地址。配置代码以下: axios
如图,浏览器中请求的url
为http://localhost:8081/api/portal/order/queryOrderRow?orderNumber=4015
我实际请求的url
为http://localhost:8080/portal/order/queryOrderRow?orderNumber=4015
本地项目经过http://localhost:8081/#/
在浏览器中进行访问。api
经过伪造请求使得http请求为同源的,而后将同源的请求发送到反向代理服务器上,由反向代理服务器去请求真正的url
,这样就绕过直接请求真正的url
致使跨域问题。跨域