React+Typescript使用Axios调用API时Headers类型错误求助

常见修复方案 #

1. 直接设置headers时处理类型不匹配 #

TypeScript对Axios的headers有默认类型约束，直接赋值Authorization容易报错，两种快速解决方式：

• 类型断言法
  把headers断言为AxiosRequestHeaders，绕过类型检查：

  import axios from 'axios';
  
  const jwtToken = '登录接口返回的JWT串';
  axios.post('/api/protected', {}, {
    headers: {
      Authorization: `Bearer ${jwtToken}`
    } as AxiosRequestHeaders
  });
  

• 自定义Axios实例
  创建全局复用的Axios实例，提前配置headers类型，后续直接设置认证头：

  import axios, { AxiosInstance } from 'axios';
  
  const api = axios.create({
    baseURL: 'http://你的Django后端地址',
    headers: { 'Content-Type': 'application/json' }
  });
  
  // 封装设置认证头的方法
  const setAuthHeader = (token: string) => {
    api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  };
  

  这种方式不用每次请求都处理类型，更适合项目全局使用。

2. 扩展Axios类型（可选） #

如果项目需要频繁自定义请求头，可以扩展Axios的类型定义：
在项目根目录新建types/axios.d.ts文件，写入：

declare module 'axios' {
  interface AxiosRequestHeaders {
    Authorization?: string;
  }
}

TypeScript会自动识别扩展后的类型，后续设置Authorization头就不会报错了。

3. 注意JWT格式 #

别忘加Bearer 前缀，Django的JWT认证组件默认要求这个格式，哪怕类型正确，格式不对后端也会返回认证失败。

验证步骤 #

1. 确认登录接口返回的是有效的JWT字符串
2. 用浏览器DevTools的Network面板，查看请求头里是否正确携带了Authorization: Bearer xxx
3. 检查TypeScript编译时的错误提示，是否和类型断言/扩展的代码冲突

内容的提问来源于stack exchange，提问作者Hyeongwoo Jeon