Axios问题：创建实例后调用get方法无法覆盖Accept请求头怎么办？

问题代码 #

const config = {
  headers: {
    'Content-Type': 'application/json',
     accept: 'application/json',
  },
  baseURL: 'https://my-site.com',
};
const axiosInstance = axios.create({config});

// 尝试覆盖请求头
const result = await axiosInstance.get('url', {
        headers: { Authorization: 'Bearer ' + accessToken, Accept: '*/*' },
        params: {}
})

问题描述 #

通过上述代码创建Axios实例，配置默认请求头Content-Type和accept均为application/json。调用该实例的get方法时，尝试将Accept请求头覆盖为*/*，但实际请求中Accept仍显示默认值，Authorization头则正常生效。如何在axiosInstance.get中正确覆盖请求头？

补充：该问题与GitHub上的Issue #1819情况类似。

解决方法 #

1. 修正实例创建代码

原代码中axios.create({config})的写法错误，会将配置嵌套在config属性中，导致Axios无法正确读取默认配置。应改为直接传入配置对象：

const axiosInstance = axios.create(config);

2. 统一请求头键名大小写

HTTP请求头本身不区分大小写，但Axios在合并请求头时对键名大小写敏感。默认配置中使用小写的accept，而请求时用大写的Accept，会被视为两个独立字段，无法实现覆盖。

解决方式二选一：

• 将默认配置的请求头改为大写Accept：

  const config = {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json', // 统一为大写
    },
    baseURL: 'https://my-site.com',
  };
  

• 或者在请求时使用小写accept：

  const result = await axiosInstance.get('url', {
          headers: { Authorization: 'Bearer ' + accessToken, accept: '*/*' }, // 统一为小写
          params: {}
  })
  

3. 强制覆盖默认请求头（可选）

如果需要确保完全替换默认请求头，可以展开实例的默认请求头并修改指定字段：

const result = await axiosInstance.get('url', {
        headers: {
          ...axiosInstance.defaults.headers,
          Accept: '*/*',
          Authorization: 'Bearer ' + accessToken
        },
        params: {}
})

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