Vue-cli创建的项目怎么实现跨域请求

  介绍

这篇文章给大家分享的是有关Vue-cli创建的项目怎么实现跨域请求的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<强>问题描述:

使用Vue-cli创建的项目,开发地址是localhost: 8023年,需要访问localhost: 9000上的接口

<强>分析原因:

不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置

不过Vue-cli创建的项目,可以直接利用节点。js代理服务器,实现跨域请求

, <强>解决方案:

接口地址原本为/形式/保存,但是为了匹配代理地址,在前面加一个/api

 Vue-cli创建的项目怎么实现跨域请求

,如果使用了axios,可以全局配置一个baseURL,这样就不用挨个儿修改url了

axios.defaults.baseURL =, & # 39;/api # 39;

在config>指数。js的dev中添加配置项proxyTable:

 Vue-cli创建的项目怎么实现跨域请求

,, proxyTable:, {   ,,& # 39;/api # 39;:, {   目标:,,,,& # 39;http://127.0.0.1:9000 & # 39;   ,,,changeOrigin:,真的,   ,,,pathRewrite:, {   ,,,,& # 39;^/api # 39;:, & # 39;/& # 39;   ,,,}   ,,}   ,,},

其中& # 39;/api # 39;为匹配项、目标为被请求的地址

因为在ajax的url中加了前缀& # 39;/api # 39;,而原本的接口是没有这个前缀的

所以需要通过pathRewrite来重写地址,将前缀& # 39;/api # 39;转为& # 39;/& # 39;

如果本身的接口地址就有& # 39;/api # 39;这种通用前缀,就可以把pathRewrite删掉

感谢各位的阅读!关于“Vue-cli创建的项目怎么实现跨域请求”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

Vue-cli创建的项目怎么实现跨域请求