排查：axios请求拦截器axios.interceptors.request.use里undefined报错

最新推荐文章于 2024-03-23 01:19:14 发布
最新推荐文章于 2024-03-23 01:19:14 发布
阅读量10w+ 收藏 1
点赞数 1
分类专栏： 前端 文章标签： axios undefined
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Scoful/article/details/124425592
版权

目录

1. 起因

一开始没有用上token验证，代码跑的好好的。
然后利用axios的请求拦截器加上token后，在最新的或者说较新的chrome里，都没问题，但是比较老旧的比如chrome59版本的浏览器就直接catch到报错，但是报错内容是空的！！！undefined报错！！
期间用时至少6小时才排查出来，简直了。
下面这段代码看起来有问题吗？
在这里插入图片描述

2. 可能问题

2.1 老版本浏览器不支持promise？

一度差点以为这就是答案，因为用手动加token的axios来访问就是ok的。但只要用上拦截器就是catch到undefined报错，不理解
加插件，让不支持promise的也支持，也是报错
只能一行代码一行代码的试
最后发现，其实promise是支持的，那就奇怪了

2.2 老版本浏览器不支持replaceAll？

YES！！！！
请看下图，假如在框里用了replaceAll，
在这里插入图片描述
在这里插入图片描述
replaceAll要2020年后的chrome浏览器才支持！
至此，问题发现了，那就好解决了，一开始那个undefined，真的不知道哪里出的问题了。

3. 总结

用时6小时+，有时候不合预期的代码表现，肯定是有问题的，但就是报错没报出来，这时候真的就只能保持住耐心一点一点试了，等定位到了，就哦原来是这样的，但中间真的就浪费太多时间精力了。
写个文章吐槽一下~

Scoful
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
10-17
axios.interceptors.request.use(function(config) { // 确保能够使用window.app if (window.app) { // 使用window.app.$vux来进行提示 window.app.$vux.toast.show(...); } return config; }, function...
axios请求拦截器错误_axios----请求拦截器和响应拦截器
weixin_35744893的博客
01-26 1601
1.请求拦截器:请求拦截器的作用是在请求发送前进行一些操作:// 后添加的拦截器,先执行!!!// 添加请求拦截器(回调函数)axios.interceptors.request.use(config=>{console.log('request interceptor 请求拦截器1');return config // return是为了继续向下传递, promise链式传递},error...
axios请求接口返回undefined
weixin_73872257的博客
03-23 2106
后端返回的数据可以在控制台上看到，但是前端接收的是undefined。
axios请求本地资源 response报错undefined ts(2532)
ProgrammingWhite的博客
08-29 1675
axios response undefined
Vue中使用axios打印res为undefined解决方法
coderYYY的博客
07-05 9172
我在Vue中对做了一个封装，封装后进行POST请求。在控制台中，后端响应成功/失败是有返回res数据的，但是响应失败的时候在Vue中打印res却为。试着使用和也没有效果 解决方法 原来是我在axios封装拦截器的时候，忘记把给出去，所以调用的时候是取不到失败时候的值，只需在axios封装的时候返回一下； 无论是响应成功/失败，都必须return！！！！ 有空的话会出个的教程（这个在项目中很重要）...
vue3+axios刷新浏览器interceptors无效问题
三劫散仙
12-08 1300
vue前端应用在用户登录之后，服务端会返回一个认证token，前端会将此token存在cookie中，之后前端每次发起的向服务端的请求时，会通过axios的interceptors.request方法，来自动将cookie中的token取出来放在请求头中
vue axios得到数据，因为异步原因，结果输出undefined处理
weixin_44168784的博客
08-03 5541
axios数据获取到，赋值为空
vue-基于Vue+axios前端实现登录登出拦截功能.zip
05-04
axios.interceptors.request.use(config => { if (store.getters.isAuthenticated) { // 添加Authorization头，例如JWT令牌 config.headers.Authorization = `Bearer ${store.state.auth.token}`; } else { // ...
axios-0.21.4.tar.gz
最新发布
06-10
- **请求拦截**：`axios.interceptors.request.use(function, function)`，可以在请求发送前进行修改。 - **响应拦截**：`axios.interceptors.response.use(function, function)`，可以在响应返回后进行处理，如...
axios封装拦截器.docx
05-09
我们可以使用 `instance.interceptors.request.use()` 来添加请求拦截器。下面是一个示例，展示了如何在请求头中添加 `Authorization` 字段： ```javascript instance.interceptors.request.use( config => { ...
vue axios登录请求拦截器
08-27
在上面的代码中，我们使用 `axios.interceptors.request.use` 添加了一个请求拦截器，并在发送请求之前执行操作。同样，我们使用 `axios.interceptors.response.use` 添加了一个响应拦截器，并在响应结果后执行操作...
关于axios请求数据回来，数据可以挂载却出现undefined
m0_58338655的博客
08-31 1356
关于axios请求数据回来，数据可以挂载却出现undefined
axios.interceptors.request.use简介
码字不易，大家的支持就是我坚持下去的动力
03-21 4137
是一个拦截器，它可以在发送请求之前对请求进行拦截并进行一些处理。它的参数是一个函数，该函数接受一个config对象作为参数，其中包含了请求的各种配置信息。以下是configurl: 请求的 URL 地址。method: 请求的 HTTP 方法，如 GET、POST 等。headers: 请求头信息，可以设置一些自定义的头部信息，如认证信息等。params: GET 请求中的查询参数，会被拼接在 URL 后面，如foo=bar。data。
axios.interceptors.request 支持config自定义参数的方法及注意事项
weixin_42484910的博客
06-27 5584
1.在请求头里自定义参数 2.直接在config中自定义参数 注意 **因为axios对传入的参数做了过滤处理，我们需要在过滤白名单数组中增加我们需要的字段（axios/lib/core/mergeConfig.js中），否则config对象里找不到isgetArray,isUpdateUser...
关于axios配置拦截器不生效的问题
热门推荐
qq_46722516的博客
03-28 1万+
最近是在网上找了个开源项目准备二次开发，在跑后台项目时遇到个大坑，由于以前没遇到过，花了不少时间，今天被同事解决了，记录一下。 问题描述： axios配置请求拦截器响应拦截器（为了对请求统一设置token，获取token，状态码判断）， 代码如下： // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api 的 base_url timeout: 10000 // 请求超时时间 })
axios添加自定义headers（token验证）出现跨域，django版本的解决方案
小马哥的博客
08-17 3235
因为业务需要，在每一个请求里面都需要添加token等验证信息。但是在axios的请求的headers里面加了token等字段后，出现了跨域错误 from origin ‘http://192.168.1.100:8020’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is pre
Vue：request undefined：/api/query
chaoge_dgqb的博客
11-08 985
使用 vue 请求 api 的时候，控制台报错 undefined: /api/query 这是因为使用了 interceptor，参考vue-and-axios-request-undefined 全局搜索 interceptor，可以发现有如下代码： service.interceptors.response.use( response => { // dataAxios 是 axios 返回数据中的 data const dataAxios = response.
Axios.Interceptors(拦截器)
m0_63057114的博客
04-02 1954
Axios拦截器(Interceptors)主要分为两种：请求拦截器（interceptor.request），响应拦截器（interceptor.response）。作用：将 axios 中共有的参数，响应公共处理交给拦截器处理，减少axios发送请求时的代码冗余。简单来说就是在请求或响应被 then 或 catch 处理前拦截它们。
小张和跨域问题
weixin_44617291的博客
08-19 576
小张终于学跨域了同源策略 同源策略 同协议+同端口+同域名
axios.interceptors.request.use()具体用法
05-22
`axios.interceptors.request.use()`方法是用来拦截所有的请求，并在发送请求之前对请求进行一些处理或者添加一些公共的配置。具体用法如下： ```javascript axios.interceptors.request.use( function(config) { // 在发送请求之前做些什么 config.headers.Authorization = localStorage.getItem('token') return config }, function(error) { // 对请求错误做些什么 return Promise.reject(error) } ) ``` 其中，第一个参数是一个函数，接收一个`config`对象作为参数，`config`包含了请求的相关配置信息，我们可以在这个函数中对`config`进行修改，例如添加请求头、设置请求超时时间等等。 第二个参数也是一个函数，接收一个`error`对象作为参数，用于处理请求错误。 需要注意的是，`axios.interceptors.request.use()`返回的是一个拦截器的id，我们可以使用`axios.interceptors.request.eject(id)`方法来移除这个拦截器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值