Vue中axios做请求的跨域问题(客户端)解决

vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” 这种跨域错误。
在这里插入图片描述
虽然让后台做简单的配置即可解决,但是求人的事还是少做的好,如果前端能自己解决,也当作自己的经验积累了。
言归正传,直接上代码:
1.在config文件夹下找到index.js,在dev:{}中找到 proxyTable: {},增加代码块如下:

 proxyTable: {
      "/api":{
        target: 'http://45.79.75.100:8889',
        changeOrigin: true,
        pathRewrite: {
        '^/api': '/'
        }
        }
    },

2.在你自己工程下的地方,找到请求接口(我原本的请求接口为
http://45.79.75.100:8889/book/api/news/list?version=1.0&pageSize=10&pageNo=1
修改后就变成了
http://45.79.75.100:8889/api/book/api/news/list?version=1.0&pageSize=10&pageNo=1

在此以get请求为例,

 axios.get("/api/book/api/news/list?version=1.0&pageSize=10&pageNo=1")....

3.将工程重新保存,在powershell 中ctrl + c终止工程,重新npm run dev,你就会看到
在这里插入图片描述
在这里插入图片描述
请求连接是真实有效的,方便大家测试,非诚勿扰。
以上个人成功的案例仅供参考,不懂要悟。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值