ReactJS+TypeScript中Axios拦截器配置及TS类型错误解决求助

从React+JavaScript转用TypeScript后，配置Axios请求拦截器实例时遇到如下类型错误：

src/utils/services/axios.service.ts:16:8
TS2322: Type '{ 'Content-Type': string; Accept?: AxiosHeaderValue | undefined; "Content-Length"?: AxiosHeaderValue | undefined; "User-Agent"?: AxiosHeaderValue | undefined; "Content-Encoding"?: AxiosHeaderValue | undefined; Authorization?: AxiosHeaderValue | undefined; }' is not assignable to type 'AxiosRequestHeaders'.
  Type '{ 'Content-Type': string; Accept?: AxiosHeaderValue | undefined; "Content-Length"?: AxiosHeaderValue | undefined; "User-Agent"?: AxiosHeaderValue | undefined; "Content-Encoding"?: AxiosHeaderValue | undefined; Authorization?: AxiosHeaderValue | undefined; }' is missing the following properties from type 'AxiosHeaders': set, get, has, delete, and 23 more.
    14 |   let headers = {...config.headers, 'Content-Type': 'application/json', Authorization: `JWT ${token}`};
    15 |   if(TokenHelpers.checkIfLoggedIn()) config.headers = headers;
  > 16 |   else config.headers = {...config.headers, 'Content-Type': 'application/json'};
       |        ^^^^^^^^^^^^^^
    17 |   return config;
    18 | }, error => Promise.reject(error));

对应的axios.service.ts代码如下：

import axios from "axios";
import CacheHelper from "../helpers/cacheHelper";
import TokenHelpers from "../helpers/tokenHelpers";
import CookieHelper from "../helpers/cookieHelper";
import {Configs, GeneralAppInfo} from "../helpers/constants";

const instance = axios.create({
baseURL: GeneralAppInfo.BASE_URL,
});

instance.interceptors.request.use(config => {
let token = TokenHelpers.getToken();
let headers = {...config.headers, 'Content-Type': 'application/json', Authorization: `JWT ${token}`};
if(TokenHelpers.checkIfLoggedIn()) config.headers = headers;
else config.headers = {...config.headers, 'Content-Type': 'application/json'};
return config;
}, error => Promise.reject(error));

错误原因 #

Axios在TypeScript中，config.headers的类型是AxiosHeaders——这是一个包含set、get、delete等方法的特殊对象。而你用扩展运算符...复制出来的是普通JavaScript对象，缺少这些方法，因此触发类型不匹配错误。

修复方法1：用AxiosHeaders包裹新对象 #

通过axios.AxiosHeaders()工具类将普通对象转换为符合类型要求的AxiosHeaders实例：

import axios from "axios";
import CacheHelper from "../helpers/cacheHelper";
import TokenHelpers from "../helpers/tokenHelpers";
import CookieHelper from "../helpers/cookieHelper";
import {Configs, GeneralAppInfo} from "../helpers/constants";

const instance = axios.create({
baseURL: GeneralAppInfo.BASE_URL,
});

instance.interceptors.request.use(config => {
  let token = TokenHelpers.getToken();
  let headers = axios.AxiosHeaders({
    ...config.headers,
    'Content-Type': 'application/json',
    Authorization: `JWT ${token}`
  });
  if(TokenHelpers.checkIfLoggedIn()) {
    config.headers = headers;
  } else {
    config.headers = axios.AxiosHeaders({
      ...config.headers,
      'Content-Type': 'application/json'
    });
  }
  return config;
}, error => Promise.reject(error));

修复方法2：直接操作现有headers对象（推荐） #

避免替换整个headers对象，而是直接修改属性，保留AxiosHeaders的方法，更高效：

import axios from "axios";
import CacheHelper from "../helpers/cacheHelper";
import TokenHelpers from "../helpers/tokenHelpers";
import CookieHelper from "../helpers/cookieHelper";
import {Configs, GeneralAppInfo} from "../helpers/constants";

const instance = axios.create({
baseURL: GeneralAppInfo.BASE_URL,
});

instance.interceptors.request.use(config => {
  // 确保headers存在，不存在则初始化空的AxiosHeaders
  config.headers = config.headers ?? axios.AxiosHeaders();
  
  // 直接设置Content-Type
  config.headers.set('Content-Type', 'application/json');
  
  if(TokenHelpers.checkIfLoggedIn()) {
    let token = TokenHelpers.getToken();
    config.headers.set('Authorization', `JWT ${token}`);
  } else {
    // 未登录时移除Authorization头（可选）
    config.headers.delete('Authorization');
  }
  
  return config;
}, error => Promise.reject(error));

内容的提问来源于stack exchange，提问作者Cynthia Nwakaeme