如何在Axios拦截器中为Authorization头分配令牌？解决TS报错

TypeScript报这个错的核心原因是：Axios的Config类型定义中，headers字段是可选属性，即便你创建实例时设置了默认headers，拦截器接收的config对象仍可能不存在headers属性。

以下是几种可行的解决方式：

方法1：提前初始化headers（最安全） #

在赋值Authorization前，先确保headers对象存在，不存在则创建空对象：

axiosIns.interceptors.request.use(async config => {
  const accessToken = await authService.getAccessToken()
  // 确保headers存在，不存在则初始化空对象
  config.headers = config.headers || {}
  config.headers.Authorization = `Bearer ${accessToken}` 
  return config
})

方法2：使用可选链操作符 #

通过可选链简化赋值逻辑，当headers为undefined时不会执行赋值操作，Axios会自动处理空headers的情况：

axiosIns.interceptors.request.use(async config => {
  const accessToken = await authService.getAccessToken()
  config.headers?.Authorization = `Bearer ${accessToken}` 
  return config
})

方法3：类型断言（谨慎使用） #

如果你能100%确认config.headers一定存在（比如实例创建时强制配置了默认headers），可以用类型断言跳过TypeScript的检查：

axiosIns.interceptors.request.use(async config => {
  const accessToken = await authService.getAccessToken()
  (config.headers as { Authorization?: string }).Authorization = `Bearer ${accessToken}` 
  return config
})

注意：如果运行时config.headers实际为undefined，这种写法会抛出错误，仅适用于你能严格保证headers存在的场景。

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