Vue设置axios的Authorization头时报Cannot set properties of undefined错误如何解决

报错的核心原因是 axios.defaults.headers.common 为 undefined，无法直接为其设置 Authorization 属性，可按以下步骤排查解决：

1. 确认axios引用正确 #

• 若你是在组件内局部使用axios，需确保组件头部已正确导入axios：

  import axios from 'axios'
  

• 若你是将axios挂载到Vue原型上全局使用（如Vue2中Vue.prototype.$axios = axios、Vue3中app.config.globalProperties.$axios = axios），需要通过实例调用，不能直接写axios：

  // 正确写法
  this.$axios.defaults.headers.common['Authorization'] = "Bearer " + token
  

• 若你使用的是自定义创建的axios实例，需要修改对应实例的配置，而非全局axios的默认配置：

  // 假设你创建的自定义实例名为service
  const service = axios.create({ baseURL: '/api' })
  // 正确写法
  service.defaults.headers.common['Authorization'] = "Bearer " + token
  

2. 补充兜底初始化避免报错 #

如果确认axios引用正确但仍存在headers层级未初始化的问题，可以在赋值前先做兜底判断：

beforeCreate() {
  const token = localStorage.getItem("token")         
  // 兜底初始化headers层级
  axios.defaults.headers = axios.defaults.headers || {}
  axios.defaults.headers.common = axios.defaults.headers.common || {}
  if (token) {
    axios.defaults.headers.common['Authorization'] = "Bearer " + token
  } else {
    // 无token时直接删除该字段更规范，不需要设为空字符串
    delete axios.defaults.headers.common['Authorization']
  }
}

注：你代码中的生命周期钩子名beforeCreated拼写有误，Vue官方钩子为beforeCreate（末尾无d），拼写错误会导致钩子不触发。

更推荐的实现方案 #

全局请求头建议通过axios请求拦截器实现，比直接修改默认配置更稳定，不会出现配置初始化顺序问题：

// 该代码可放在main.js或单独的axios封装文件中
import axios from 'axios'

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

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