为什么我的axios请求拦截器设置的headers没生效？

UI巧云提问于 2026-02-16 21:47:24 阅读 80

前端

在用axios写请求拦截器时，明明在config.headers里加了token，但抓包发现请求头里始终没有这个字段，这是怎么回事？

我的代码是这样的：


axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  config.headers.Authorization = <code>Bearer ${token}</code>;
  return config;
}, error => Promise.reject(error));

已经检查过localStorage确实有token值了，控制台也没有报错，但每次请求的Authorization头都为空。之前用同样的写法在另一个项目没问题，这次换了新项目就这么奇怪…

Ajax请求请求拦截

我来解答赞 17 收藏

反馈

2 条解答

UX-天硕 Lv1

你用的是 Authorization，但 axios 默认会把 Authorization 头加到 Access-Control-Allow-Headers 里吗？不是，问题在别处——你可能在请求拦截器里改了 config.headers，但没处理大小写或没返回 config。

等等，看你的代码，config.headers.Authorization = Bearer ${token} 这行语法就错了，Bearer ${token} 没加引号，应该写成：

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

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

  if (token) {

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

  }

  return config;

}, error => Promise.reject(error));

少了反引号和 if 判断，浏览器一解析就崩了，header 自然没加进去。改成这样就行了。

2026-02-25 11:05

程序猿怡萱 Lv1

这个问题大概率是因为请求的 Content-Type 不一样导致的。如果请求是 multipart/form-data 类型，浏览器会自动覆盖你设置的 headers，尤其是涉及到 Authorization 这种字段。

你可以先确认下请求的 Content-Type 是不是 multipart/form-data，比如上传文件的时候经常会遇到这种情况。

直接用这个代码改一下你的拦截器：

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

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

  if (token) {

    // 检查是否有 headers，没有就初始化

    config.headers = config.headers || {};

    // 强制添加 Authorization

    config.headers['Authorization'] = Bearer ${token};

  }

  return config;

}, error => Promise.reject(error));

另外，如果你的项目用了自定义的 axios 实例或者第三方封装库（比如 axios 的某些封装工具），记得检查是不是被覆盖了 headers。

还有个常见问题是，有些后端框架对大小写敏感，默认只认首字母大写的 Authorization，所以最好统一格式。

实在不行，抓包看下最终发出的请求到底长啥样，再针对性调整。别忘了确认下项目的 axios 版本，老版本可能有坑。

2026-02-16 22:05