axios请求拦截后请求头没变化是怎么回事？

迷人的书娟提问于 2026-02-09 16:24:32 阅读 10

前端

在用axios设置请求拦截时，给config.headers赋值token后，发现发送出去的请求头里并没有这个字段，控制台也没报错，这是为什么呢？

我按照文档写了拦截器：


axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  config.headers.Authorization = <code>Bearer ${token}</code>;
  console.log('拦截到请求:', config.headers); // 这里能正常打印出带token的header
  return config;
});

但实际发送请求时，通过浏览器开发者工具看network请求头，Authorization字段就是没有。难道是拦截器执行顺序有问题？或者我哪里没return？

我来解答赞 4 收藏

反馈

2 条解答

西门建英 Lv1

这问题我遇到过，看着代码没问题但请求头就是不生效，大概率是因为你创建了多个axios实例或者用了默认实例但拦截器没正确绑定。

首先确认一点：你是不是用了 axios.create() 创建了一个新的实例？如果用了，那必须给这个实例加拦截器，而不是直接用 axios.interceptors。比如：

const instance = axios.create();



instance.interceptors.request.use(config => {

  const token = localStorage.getItem('token');

  if (token) {

    config.headers.Authorization = Bearer ${token};

  }

  return config;

});



// 后续请求必须用 instance.get/post 而不是 axios.get/post

如果你还是用 axios.get() 发请求，那根本不会走你给自定义实例加的拦截器，自然header也就不会变。

还有一种可能是你在设置headers之前，已经有其他地方设置了同名header但被覆盖了。通用的做法是在拦截器里统一处理，并且确保返回config。

另外别忘了判断token是否存在，不然可能拼出 Bearer null 这种无效值。

最后检查下浏览器network面板里的实际请求，看是不是发出了预检请求（OPTIONS），如果是跨域，要后端允许Authorization字段，否则就算前端设置了也会被浏览器拦掉。

说白了就三件事：用对实例、发对请求、后端配对字段。先从实例和调用方式查起，八成是这里搞混了。

2026-02-12 04:00

书生シ雨晨 Lv1

你这个写法看着没问题，但实际常见坑是：拦截器注册的时机太晚。很多人把 axios.interceptors.request.use 写在了路由守卫或者组件 mounted 之后才执行，这时候可能已经发过请求了。

确保你的拦截器是在 axios 实例创建后、任何请求发出前就注册好。比如在 request.js 或者 api 配置文件里初始化完 axios 就立刻注册拦截器。

另外一个小概率问题是 headers 的覆盖问题。有些情况下你后续又 new 了一个 axios 实例但没加拦截器，或者是用了默认实例和自定义实例混用。建议统一用一个封装好的实例：

const service = axios.create({

  baseURL: '/api',

  timeout: 5000

})



service.interceptors.request.use(config => {

  const token = localStorage.getItem('token')

  if (token) {

    config.headers.Authorization = Bearer ${token}

  }

  return config

})



export default service

然后你所有请求都用这个 service 实例发，就不会丢 header 了。

最后检查下浏览器控制台 Network 里的预检请求（OPTIONS），如果你的 Authorization 字段没带过去，可能是 CORS 问题导致浏览器根本没发这个头。后端处理跨域时要确认允许 Authorization 字段，比如 Node.js Express 加个：

res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type')

先确定是不是拦截器生效时机 + 实例统一 + 跨域白名单这三个点，八成是其中之一的问题。

2026-02-09 16:25