vue-cli配置反向代理和跨域访问问题

vue-cli配置反向代理

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

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

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

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

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


如图,浏览器中请求的url为http://localhost:8081/api/portal/order/queryOrderRow?orderNumber=4015

我实际请求的url为http://localhost:8080/portal/order/queryOrderRow?orderNumber=4015

本地项目通过http://localhost:8081/#/在浏览器中进行访问。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。