VUE axios 跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

在Vue开发环境中,使用Axios进行API调用时遇到跨域问题,浏览器因缺少'Access-Control-Allow-Origin'头而阻止请求。解决办法是检查项目是否包含vue.config.js文件。如果没有,通过'vue ui'创建并配置代理。在vue.config.js中设置代理目标URL,重启项目以使配置生效。这样,可以避免手动在每个请求中添加请求前缀。
摘要由CSDN通过智能技术生成

开发环境中,使用axios调用接口时,出现跨域的时候会被浏览器拦截,故而造成请求失败,并且在控制台中显示 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8081’ is therefore not allowed access.**

第一步:看看你的项目根部有没有vue.config.js这个文件;
如果没有那你要用“终端”输入“vue ui” 打开vue项目管理界面,找到下面这个配置项,配置好点击保存就在对应的路径生成vue.config.js文件了:
在这里插入图片描述
打开vue.config.js 文件,配置需要代理的请求路径前缀 http://www.xxxxxxxx.xxx 或者http://xxx.xxx.xx.xx:xxxx:
在这里插入图片描述
配置好之后,记得重启vue项目,要不是不会生效的。

请求前缀,你可以统一在这里设置,也可以不在这里设置,在请求的时候加上。

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值