Laravel Passport授权后Axios默认Bearer头不生效，求解决方案

我来帮你搞定这个问题！你已经成功拿到token了，说明授权流程本身没问题，问题大概率出在Axios默认头的设置时机或者方式上，我给你分析几个常见原因和对应的解决方案：

1. 检查是否使用了自定义Axios实例 #

很多Vue项目会创建自定义的Axios实例（比如封装在src/utils/request.js里），而不是直接用全局的axios对象。如果是这种情况，你设置axios.defaults.headers.common是不会对自定义实例生效的。

举个例子，如果你是这样创建的实例：

// src/utils/request.js
const api = axios.create({
  baseURL: '/api'
})

export default api

那你应该给这个api实例设置请求头，而不是全局的axios：

async function getToken() {
  const resp = await axios.post("/oauth/token", {
    "client_id": 7,
    "client_secret": "2GmvfxQev7AnUyfq0Srz4jJaMQyWSt1iVZtukRR6",
    "grant_type": "client_credentials",
    "scope": "*"
  });
  return resp.data.access_token;
}

getToken().then((token) => {
  api.defaults.headers.common["Authorization"] = `Bearer ${token}`;
})

2. 用请求拦截器替代一次性设置默认头 #

你的原始写法是页面加载时一次性获取token并设置默认头，但如果后续请求在token设置完成前就发起（比如组件的created钩子直接发请求），就会出现头缺失的情况。请求拦截器是更可靠的方案，它会在每次请求发起前动态检查并设置token：

// 在bootstrap.js或者你的Axios配置文件中添加拦截器
axios.interceptors.request.use(
  async (config) => {
    // 先尝试从localStorage获取缓存的token
    let token = localStorage.getItem('access_token');
    
    // 如果没有token，就重新请求获取
    if (!token) {
      const resp = await axios.post("/oauth/token", {
        "client_id": 7,
        "client_secret": "2GmvfxQev7AnUyfq0Srz4jJaMQyWSt1iVZtukRR6",
        "grant_type": "client_credentials",
        "scope": "*"
      });
      token = resp.data.access_token;
      // 把token存到localStorage，避免每次页面刷新都重新请求
      localStorage.setItem('access_token', token);
    }
    
    // 给当前请求设置Authorization头
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => {
    // 请求出错时的处理
    return Promise.reject(error);
  }
);

这种方式的好处：

• 确保每次请求都能带上有效token，不管请求发起时机
• 缓存token到本地，减少不必要的授权请求
• 避免其他请求单独设置headers时覆盖默认头

3. 检查是否有代码覆盖了请求头 #

如果某些特定请求单独设置了headers参数，会覆盖全局的common头。比如：

axios.get('/api/data', {
  headers: {
    'Content-Type': 'application/json'
  }
})

这种情况可以把Authorization头合并进去，或者直接用上面的请求拦截器，拦截器会自动把Authorization头添加到所有请求里，不会被覆盖。

另外，你的原始getToken函数可以简化一下，没必要用then和临时变量，直接await返回更清晰：

async function getToken() {
  const resp = await axios.post("/oauth/token", {
    "client_id": 7,
    "client_secret": "2GmvfxQev7AnUyfq0Srz4jJaMQyWSt1iVZtukRR6",
    "grant_type": "client_credentials",
    "scope": "*"
  });
  return resp.data.access_token;
}

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