拦截器-请求路径跳转至/error导致token请求

现象:

        前端的请求被拦截器拦截了两次,出现了两次token请求

调试情况:

        拦截器拦截了两次,第一次是静态请求/error,第二次无法打印出拦截路径。

错误分析:

        多次查找资料后在不经意间发现上一条请求完后,控制台爆出:No Mapping错误,没有即时发现导致一直没有找到问题关键所在。原因是Contrller请求地址与前端地址不匹配,前端无法请求到对应方法,导致前端加载页面得不到数据致使加载死循环。

解决办法:

        查找接口请求地址是否与前端一致,如果/title这个访问路径在项目中不存在,那么当你访问http://xxxx/ltitlle时,依然会被拦截,因为此时变成了/error这个路径,在你自定义的拦截器中也可以通过request.getRequestUrl得到验证。

      tip:  查资料时发现另一博主出现类似问题,原因是重定向页面未添加到排除路径中,导致重定向页面成为error(暂未发现该bug,日后可能会有,先mark)

  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Node.js是一个基于Chrome V8引擎的JavaScript运行环境,可用于开发服务端应用程序。Axios是一个基于Promise的HTTP客户端,用于发送HTTP请求。Axios支持浏览器和Node.js环境。 在Node.js中使用Axios发送HTTP请求,可以通过以下步骤实现: 1. 安装Axios 可以通过npm命令安装Axios: ``` npm install axios ``` 2. 发送HTTP请求 可以使用Axios的get、post、put、delete等方法发送HTTP请求。例如: ``` const axios = require('axios'); axios.get('http://localhost:3000/api/user') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ``` 3. 添加请求拦截器 可以通过Axios的interceptors属性添加请求拦截器拦截器可以在发送请求前对请求进行处理。例如,可以在请求头中添加token等信息: ``` axios.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); } ); ``` 4. 添加响应拦截器 可以通过Axios的interceptors属性添加响应拦截器拦截器可以在接收到响应后对响应进行处理。例如,可以在响应中检查是否需要跳转到登录页面: ``` axios.interceptors.response.use( response => { return response; }, error => { if (error.response.status === 401) { // 跳转到登录页面 window.location.href = '/login'; } return Promise.reject(error); } ); ``` 以上是使用Axios发送HTTP请求及添加拦截器的基本步骤。在实际应用中,还需要考虑请求的参数、响应的处理等方面。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶陶乌龙茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值