Vue-cli--jquery.ajax调用接口跨域问题( No 'Access-Control-Allow-Origin' ),接口无法加载响应数据
本人小白一个,在调用后台给的接口时,频频报错,特此记录一下
项目是vue-cli搭建,分正式测试环境,接口使用jquery.ajax调用
调用过程中出现以下两个错误
一个是No 'Access-Control-Allow-Origin,在网上找了相关文章为跨域问题,因为我本地和接口所在地址不是同源,这个后面采用了代理处理
另一个是failed to load response data :No data found for resource with given identifier
无法加载响应数据:没有找到具有给定标识符的资源的数据
在控制台里显示以下信息,想不出为什么,于是到浏览器的Network查看接口调用过程, 发现有个一闪而过的提示信息为CORB(跨源读取阻止),于是用浏览器直接打开接口地址发现正常,证明还是我的代码问题
解决方法
在config.js中,建立代理
target为访问接口的域名或ip地址
changeOrigin:true 代表跨域
例如域名为http://www.abc.com,接口地址为http://www.abc.com/getInfo,
那么将target会替代”http://www.abc.com“这段域名变为/abc给接口调用,接口写为/abc/getInfo,实际地址就是http://www.abc.com/getInfo
因为实际接口里没有代理的这个字段,所以使用pathRewrite替换为空
具体可以参考解决vue-cli项目跨域问题
在接口里,直接使用代理完善接口地址
在组件中调用接口,调用成功