介绍
这篇文章给大家分享的是有关Vue-cli创建的项目怎么实现跨域请求的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>问题描述:强>
使用Vue-cli创建的项目,开发地址是localhost: 8023年,需要访问localhost: 9000上的接口
<强>分析原因:强>
不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置
不过Vue-cli创建的项目,可以直接利用节点。js代理服务器,实现跨域请求
, <强>解决方案:强>
接口地址原本为/形式/保存,但是为了匹配代理地址,在前面加一个/api
,如果使用了axios,可以全局配置一个baseURL,这样就不用挨个儿修改url了
axios.defaults.baseURL =, & # 39;/api # 39;
在config>指数。js的dev中添加配置项proxyTable:
,, 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创建的项目怎么实现跨域请求”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!