使用Axios携带Bearer Token调用接口遇401未授权错误求助

阿华AIGC实验室

2026-5-12

排查Axios请求返回401未授权的常见原因与解决方法

我看你用Axios配置了Bearer Token访问后端路由，但一直收到401未授权响应，这种情况我之前开发时也遇到过，咱们一步步来排查可能的问题：

1. 先确认Token本身的有效性

首先要排除Token本身的问题，别在请求配置上瞎忙活。你可以用Postman或者curl直接调用目标接口，带上完全相同的Authorization头，看看结果：

curl -H "Authorization: Bearer f4eaa1ff05046c01" http://localhost/rocourt/01-Backend/api/v1/public/adresses/1

如果Postman/curl也返回401，那基本可以确定是Token的问题——要么过期了，要么权限不够，或者后端生成Token的逻辑和你使用的不匹配，这时候得去后端确认Token的有效性、权限范围和有效期。

2. 检查Axios的请求头是否正确携带

有时候Axios实例的全局headers配置可能不会生效，比如被后续的请求配置覆盖，或者拦截器影响。可以试试两种方式验证：

方式一：在请求拦截器里统一设置头

把Token的设置放到请求拦截器里，确保每个请求都能带上：

import axios from 'axios';
export const HTTP = axios.create({
  baseURL: `http://localhost/rocourt/01-Backend/api/v1/public/`
});

// 添加请求拦截器，确保每次请求都带上Authorization头
HTTP.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer f4eaa1ff05046c01';
  return config;
}, error => {
  return Promise.reject(error);
});

方式二：在单个请求里显式指定headers

暂时绕过实例的全局配置，直接在get请求里写headers，看看是不是实例配置的问题：

HTTP.get(`adresses/1`, {
  headers: { Authorization: 'Bearer f4eaa1ff05046c01' }
})
.then(response => {
  this.posts = response.data;
})
.catch(e => {
  this.errors.push(e)
})

3. 验证后端的权限与头解析逻辑

确认/adresses/1这个接口是否真的需要Bearer Token？有没有可能后端把这个接口设为公开接口，但你多余加了Token反而触发了校验？
检查后端对Authorization头的解析规则：比如是否严格要求Bearer后面必须有空格（你现在的写法是对的，但有些后端可能有大小写要求，比如必须是Bearer而不是bearer）？
如果后端用了框架（比如Laravel、Spring Boot），检查框架的权限中间件是否正确配置，有没有把这个接口排除在权限校验外，或者你的Token没有对应的访问权限。

4. 排查跨域导致的请求头丢失

如果前端和后端是跨域部署（哪怕是localhost的不同端口），浏览器会发送OPTIONS预检请求，这时候如果后端的CORS配置没有允许Authorization头，浏览器会拦截实际的请求头，导致后端拿不到Token。你需要检查后端的CORS设置，确保Access-Control-Allow-Headers包含Authorization字段。