使用axios拦截器时如何修复config.headers.Authorization可能为undefined的TS报错

问题原因 #

TypeScript 对 Axios 的 AxiosRequestConfig 类型定义中，headers 是可选属性，默认可能为 undefined，你直接对 config.headers.Authorization 赋值就会触发空值检测报错。另外 axios 请求拦截器的 config 参数一定会存在，你写的 if (!config) 判空逻辑完全多余，可以直接删掉。

最优处理方案（按优先级排序） #

• 方案1：创建实例时默认配置headers，一劳永逸
  如果所有通过 loggedInAxios 发起的请求都需要挂载认证头，直接在创建实例时就给headers设置默认空对象，后续拦截器不需要再加任何判空逻辑：

const loggedInAxios = axios.create({
  headers: {}
});

// 拦截器里直接赋值即可，不会再触发TS报错
config.headers.Authorization = `Bearer ${accessToken}`;

• 方案2：使用空值合并运算符简化判空
  如果不方便修改实例初始化配置，可以用ES6+语法在拦截器里做一层极简兜底，比多层if更简洁易读：

// TS 3.7+ 支持空值合并赋值语法
config.headers ??= {};
config.headers.Authorization = `Bearer ${accessToken}`;

// 低版本TS可以用普通空值合并写法
config.headers = config.headers || {};
config.headers.Authorization = `Bearer ${accessToken}`;

• 方案3：类型断言（适合确认逻辑安全的场景）
  如果你能确定业务场景下 config.headers 一定存在，也可以通过类型断言告诉TS跳过检测，代码最简洁，没有额外运行时开销：

(config.headers as Record<string, string>).Authorization = `Bearer ${accessToken}`;

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