Vite项目中Axios自定义Header报错：config.headers.common未定义

问题原因 #

你直接覆盖了axios.defaults.headers.common为新对象，可能破坏了Axios默认的headers结构，导致部分请求的config未正确继承该属性；同时拦截器中直接访问config.headers.common时，该属性可能未完成初始化。

修复方案 #

方案1：修改默认headers的赋值方式 #

不要直接替换common对象，而是逐个添加header，保留Axios原有结构：

import axios from 'axios'
import Ls from '@/services/ls.js'

window.Ls = Ls
window.axios = axios
window.axios.defaults.withCredentials = true
// 逐个设置header，避免覆盖原有结构
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

window.axios.interceptors.request.use(function (config) {
  const companyId = 1
  if (companyId) {
    // 直接设置header，无需依赖common属性
    config.headers['company'] = companyId
  }
  return config
})

方案2：在拦截器中确保common存在再赋值 #

如果必须使用common属性，可先检查并初始化：

window.axios.interceptors.request.use(function (config) {
  const companyId = 1
  if (companyId) {
    // 确保common对象存在，避免undefined报错
    config.headers.common = config.headers.common || {}
    config.headers.common['company'] = companyId
  }
  return config
})

额外说明 #

Axios的请求config会自动合并common、对应请求方法（如get/post）的headers，直接设置config.headers的属性会自动归入common，方案1的写法更简洁稳妥。

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