Axios请求Authorization头加引号与否随重载交替报400错误原因咨询

核心结论 #

JavaScript对象中"Authorization"和Authorization作为键完全等价，你观察到的「修改引号就能解决400错误」是巧合，和引号本身没有任何关系。

问题根因 #

你在模块初始化阶段直接创建Axios实例并硬编码读取store中的token，存在初始化时机错误：

1. 页面重载后，模块顶层代码会立刻执行，此时store中的用户数据大概率还没完成初始化（比如还没从localStorage读取用户信息写入store），读取store.getState().auth.userData.token拿到的是undefined，最终请求头会变成Bearer undefined，服务器校验token无效就返回400。
2. 你修改引号后，开发环境的热重载功能会重新执行模块顶层的Axios实例创建代码，此时页面已经加载完成，store里已经有正确的token，创建出来的实例Authorization头就是正确值，请求自然正常，让你误以为是修改引号起了作用。
3. 下次页面重载又会回到「实例创建时token未初始化」的状态，就形成了「修改引号交替解决问题」的错觉。

修复方案 #

不要在实例创建时写死Authorization头，改用Axios请求拦截器动态注入token，确保每次发请求都能拿到最新的token：

// 封装请求实例
const apiRequest = axios.create({
  baseURL: "https://wagal.com",
  headers: {
    "Content-Type": "application/json; charset=utf-8",
  },
});

// 添加请求拦截器，每次发请求前动态加Authorization头
apiRequest.interceptors.request.use((config) => {
  const token = store.getState().auth.userData.token;
  // 只有token存在时才加头，避免登录等不需要token的接口也携带无效值
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default apiRequest;

如果需要验证根因，可以在原来创建Axios实例的位置加一行日志：console.log('实例创建时的token：', store.getState().auth.userData.token)，刷新页面时会看到打印undefined，修改代码触发热重载时会看到打印正确的token。

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