登录状态下app.js配置的Axios默认请求头后续调用不生效问题

核心根因 #

你遇到的axios全局请求头配置丢失，本质上是以下三类原因之一：

• 执行顺序问题：app.js 中axios配置代码的执行时机晚于组件代码的初始化时机，导致组件调用axios时配置还没写入
• 全局配置被覆盖：项目其他位置存在直接重置axios.defaults.headers.common对象的代码（而非追加属性），或是重新对window.axios赋值覆盖了你在app.js中初始化的实例
• 异步场景问题：单页应用路由切换、组件懒加载等场景下，全局axios实例的配置被意外重置

排查步骤 #

1. 验证执行顺序：在app.js axios配置代码末尾、组件created生命周期钩子、submitForm方法中分别打印axios.defaults.headers.common，按输出顺序判断是否存在执行时机颠倒的问题。如果组件代码先执行，把app.js的引入标签放在页面所有业务脚本之前，且不要给app.js的script标签加async/defer属性。
2. 排查覆盖逻辑：全局搜索项目代码中所有axios.defaults.headers.common =、window.axios =的代码，排查是否存在直接覆盖整个配置对象的操作，将这类写法改为逐个追加属性：

// 错误写法 会覆盖所有已有配置
axios.defaults.headers.common = { Accept: 'application/json' }
// 正确写法 仅追加/修改对应属性
axios.defaults.headers.common['Accept'] = 'application/json'

终极兼容方案 #

如果不想排查全局配置问题，可以改用请求拦截器的方式动态注入请求头，完全避免配置丢失问题，修改app.js中axios的初始化逻辑即可：

window.axios  = require('axios')

// 新增请求拦截器，每次发起请求前自动注入头信息
window.axios.interceptors.request.use(config => {
    const token = document.head.querySelector('meta[name="csrf-token"]');
    if (token) {
        config.headers['X-Requested-With'] = 'XMLHttpRequest';
        config.headers['X-CSRF-TOKEN'] = token.content;
    }
    
    const api_token = document.head.querySelector('meta[name="api-token"]');
    if (api_token) {
        config.headers['Authorization'] = 'Bearer ' + api_token.content;
    }
    return config
})

后续所有window.axios发起的请求都会自动携带对应的认证头，不需要依赖全局defaults的持久化配置。

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