如何在React中通过Axios.interceptor发送动态请求头？

原代码的核心问题 #

你当前的拦截器直接通过requestConfig.headers = {...}赋值，会完全覆盖请求时自带的headers对象，这就是额外添加的字段被覆盖的原因。

方案1：修复全局拦截器，保留原有请求头 #

修改拦截器逻辑，先展开原请求头再追加apikey，而不是直接替换整个headers对象：

axios.interceptors.request.use(
  (requestConfig) => {
    // 合并原有请求头与apikey，避免覆盖
    requestConfig.headers = {
      ...requestConfig.headers, // 保留请求时传入的原有头
      apikey: getApikey()
    }
    return requestConfig
  },
  (error) => Promise.reject(error)
)

之后发起带自定义头的请求时，字段会被保留：

axios.get('/target-api', {
  headers: {
    'X-Custom-Field': 'custom-content',
    'Authorization': 'Bearer your-token'
  }
})

此时请求头会同时包含apikey和你自定义的字段。

方案2：通过自定义配置实现更灵活的动态头 #

如果需要给特定接口添加专属请求头，可以在请求时传入自定义属性，再在拦截器中处理：

1. 发起请求时携带自定义头配置：

axios.post('/special-api', requestData, {
  // 自定义字段存储专属请求头
  customHeaders: {
    'X-Special-Header': 'special-value',
    'Timestamp': Date.now().toString()
  }
})

2. 修改拦截器识别并合并自定义头：

axios.interceptors.request.use(
  (requestConfig) => {
    // 基础头：原有请求头 + 全局apikey
    const baseHeaders = {
      ...requestConfig.headers,
      apikey: getApikey()
    }
    // 若存在自定义头则合并，最后清理自定义字段
    if (requestConfig.customHeaders) {
      requestConfig.headers = {
        ...baseHeaders,
        ...requestConfig.customHeaders
      }
      delete requestConfig.customHeaders
    } else {
      requestConfig.headers = baseHeaders
    }
    return requestConfig
  },
  (error) => Promise.reject(error)
)

方案3：全局默认头补充 #

如果有多个接口都需要的固定字段，可直接添加到Axios全局默认头：

// 全局生效的通用请求头
axios.defaults.headers.common['X-Global-Field'] = 'global-content'

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