使用axios.create创建实例时请求头无法被API识别的问题求助

我创建了带默认请求头的axios实例：

const instance = axios.create({
  baseURL: "url",
  timeout: 5000,
  headers: {
    authorization: "key",
  },
});

export default instance;

调用时用const response = await instance.get(url)，但API提示缺少authorization密钥；手动在请求里传headers就能正常工作：

const response = await instance.get(url, {
  headers: {
    authorization: "key",
  },
})

可能的原因及解决方法 #

• axios默认headers优先级问题：若存在全局axios拦截器或内部配置覆盖了实例headers，会导致默认authorization头丢失。可以给实例添加请求拦截器，确保请求头被正确携带：

  instance.interceptors.request.use(config => {
    if (!config.headers.authorization) {
      config.headers.authorization = "key";
    }
    return config;
  });
  

• 请求头键名大小写敏感：部分后端服务对请求头大小写有要求，比如需要Authorization首字母大写。修改实例配置的键名：

  const instance = axios.create({
    baseURL: "url",
    timeout: 5000,
    headers: {
      Authorization: "key", // 首字母大写
    },
  });
  

• 跨域预检请求问题：跨域场景下浏览器会先发OPTIONS预检请求，默认authorization头可能不会被携带。需要后端在OPTIONS请求中允许Authorization头，同时给axios实例开启跨域携带凭证：

  const instance = axios.create({
    baseURL: "url",
    timeout: 5000,
    withCredentials: true,
    headers: {
      Authorization: "key",
    },
  });
  

• axios版本兼容bug：旧版axios可能存在实例默认headers处理的bug，尝试升级到最新稳定版：

  npm update axios
  

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