Axios设置自定义Authorization请求头不生效问题排查

问题对应的封装实现代码如下：

export class Http {
  constructor(private readonly _axios: AxiosInstance) {
    this.useInterceptors();
  }

  setAuthorizationHeader(token: string): void {
    this._axios.defaults.headers.common.Authorization = `Bearer ${token}`;
  }

  unsetAuthorizationHeader(): void {
    delete this._axios.defaults.headers.common.Authorization;
  }

  private useInterceptors(): void {
    this._axios.interceptors.response.use(
      undefined,
      (error: AxiosError): Promise<AxiosError> => {
        if (error.response?.status === 401) {
          store.dispatch(actions.auth.signOut());
        }
        return Promise.reject(error.response?.data);
      },
    );
  }

  get get() {
    return this._axios.get;
  }

  get post() {
    return this._axios.post;
  }

  get put() {
    return this._axios.put;
  }

  get patch() {
    return this._axios.patch;
  }

  get delete() {
    return this._axios.delete;
  }

  get request() {
    return this._axios.request;
  }

  get axios(): AxiosInstance {
    return this._axios;
  }
}

export const http = new Http(
  axios.create({
    baseURL: API_URL,
    timeout: 60000,
  }),
);

// 配套鉴权Redux中间件
export const authMiddleware =
  () =>
  (next: Dispatch) =>
  (action: AnyAction): AnyAction => {
    if (action.type === 'client/code/fulfilled') {
      action.payload?.token &&
        http.setAuthorizationHeader(action.payload.token);
    }

    if (action.type === REHYDRATE) {
      action.payload?.auth?.token &&
        http.setAuthorizationHeader(action.payload.auth.token);
    }

    if (action.type === actions.auth.signOut.type) {
      http.unsetAuthorizationHeader();
    }

    return next(action);
  };

逻辑执行层面原因 #

• 写入触发条件未满足：Authorization字段的写入逻辑仅在两个场景下执行：一是client/code/fulfilled动作派发且携带有效token，二是redux-persist水合动作REHYDRATE派发且本地缓存中存在有效token。如果token字段路径和代码判断逻辑不匹配、本地无有效缓存、水合动作未正常执行，写入逻辑根本不会触发，公共头中自然不存在该字段。
• 字段被意外删除：响应拦截器中配置了401状态码自动触发登出逻辑，登出时会直接删除Authorization字段。如果应用初始化阶段存在接口返回401，哪怕字段已经写入，也会被立即清除。
• 中间件顺序错误：如果authMiddleware在Redux中间件链中的位置靠后（比如放在异步逻辑中间件之后），或者在REHYDRATE动作派发完成后才完成中间件注册，会导致动作无法被中间件捕获，写入逻辑不会执行。

实例与配置层面原因 #

• 实例引用不一致：如果打印时操作的不是封装导出的http.axios实例，而是全局axios对象、其他位置新建的Axios实例，将无法看到当前实例上写入的Authorization字段。
• 公共头对象被覆盖：如果项目中存在其他逻辑直接给headers.common赋值了全新的对象，之前写入的Authorization会随旧对象被替换而丢失。
• Axios版本兼容问题：0.19以下的旧版本Axios对headers.common的初始化逻辑存在缺陷，直接给对象挂载属性可能无法被正确识别为公共请求头。
• Getter方法的this指向隐患：Http类通过getter直接返回Axios实例的原始请求方法，如果使用时对方法做解构赋值，会丢失方法内部的this绑定，极端场景下会导致操作的实例和预期不一致。

调试方式层面原因 #

• 控制台懒解析陷阱：浏览器控制台对对象类型的输出采用懒求值机制，打印对象时不会立即序列化对象内容，而是在用户手动展开打印结果时才读取对象最新值。如果打印操作在字段写入前执行，或者打印后字段被立即删除，展开时将看不到Authorization字段。调试时建议直接打印http.axios.defaults.headers.common.Authorization的字符串值，避免打印整个对象导致的误判。

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