axios接口异常产生跨域问题

1 篇文章 0 订阅
1 篇文章 0 订阅

1、axios接口异常产生跨域问题

场景描述:前后端交互保持会话的方式有很多解决方案,我在遇到这个问题之前使用的vue前端框架使用的是cookie这种方式,后来使用了token保存在本地然后通过塞入请求头的方式传给后端(我不知道为啥要选用这种方式),每次请求参数错误、或者服务器异常,接口都会产生跨域问题,是不是很奇葩?

后来找到了问题所在,是因为在之前使用cookie的时候,会在axios请求中设置withCredentials = true,使得axios在跨域请求的时候都携带cookie,但是在改为token之后继续使用该框架,就产生该问题,这个问题就是withCredentials = true导致的,只需要去掉这个设置就ok了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue中使用axios调用多个接口跨域问题可以过设置代理来解决。 1. 首先,在Vue项目根目录下找到config文件夹中的index.js文件。 2. 打开index.js文件,找到dev对象中的proxyTable选项。该选项允许我们配置代理。 3. 在proxyTable选项中添加以下代码: ```javascript proxyTable: { '/api1': { target: 'http://localhost:8000', changeOrigin: true, pathRewrite: { '^/api1': '/api1' } }, '/api2': { target: 'http://localhost:8001', changeOrigin: true, pathRewrite: { '^/api2': '/api2' } } } ``` 此处使用了两个接口作为示例,一个是/api1,另一个是/api2。target参数指定了代理的目标地址,需要根据实际情况进行修改。changeOrigin参数用于配置是否跨域,默认为false,需要设置为true。pathRewrite参数用于重写请求路径,可以根据需要进行修改。 4. 保存并关闭index.js文件。 5. 在Vue组件中使用axios调用接口时,只需要将接口的路径改为对应的代理路径,例如: ```javascript axios.get('/api1/users') .then(response => { // 处理接口1的响应 }) .catch(error => { // 处理接口1的错误 }); axios.get('/api2/posts') .then(response => { // 处理接口2的响应 }) .catch(error => { // 处理接口2的错误 }); ``` 以上代码中,/api1和/api2就是代理路径,可以直接在axios中使用。 过以上步骤,我们成功地解决了在Vue中使用axios调用多个接口跨域问题。注意,在开发环境下使用代理是安全的,但在生产环境要将代理改为实际的服务器地址。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值