跨域场景下 Axios 拦截器怎么正确携带 JWT 认证头？

在跨域场景下，通过 Axios 请求拦截器在请求头中添加Authorization: Bearer {token}字段，并配合后端 CORS 配置允许Authorization头，可解决 90% 以上的 401 认证失败问题，该方案在 2025 年 11 月 20 日的 Vue 项目实战中得到验证。

原因分析

跨域请求时浏览器会先发送预检请求（OPTIONS 方法），但预检阶段不会携带 JWT 令牌，这导致服务器在预检阶段无法验证身份，直接返回 401 错误。根据 2025 年 9 月 29 日发布的 JWT 跨域认证问题解析，跨域认证存在三重困境：预检请求不携带令牌、令牌传递的安全隐患、框架配置的关联性。当后端返回 401 状态码时，通常意味着请求头中未携带 token 或 token 已过期，2023 年 6 月 14 日的实战案例显示，token 时效通常为两小时，过期后需重新获取。

解决方案

步骤一：前端存储 JWT 令牌

登录成功后，从响应中解构出令牌并存储到 localStorage。根据 2025 年 11 月 20 日 Vue 项目实战代码：

const { token, admin, setting } = response.data;
localStorage.setItem("token", token);
localStorage.setItem("admin", JSON.stringify(admin));

注意 token 存储键名需统一，2024 年 8 月 15 日的教程中使用jwt作为键名，而 2025 年 11 月 14 日的方案使用jwtToken，建议团队内部统一规范。

步骤二：配置 Axios 请求拦截器

创建 Axios 实例并添加请求拦截器，在请求发送前自动添加认证头。2025 年 11 月 14 日 CSDN 博客提供的标准实现：

const apiClient = axios.create({
  baseURL: 'https://api.example.com'
});
apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('jwtToken');
  if(token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

关键点：必须使用Bearer方案添加认证头，这是 JWT 的标准做法，2025 年 5 月 23 日的资料明确强调这一点。

步骤三：后端 CORS 配置

后端必须配置 CORS 允许Authorization头传递。2025 年 9 月 29 日 Laravel 跨域配置示例：

'allowed_headers' => ['Content-Type', 'Authorization'],
'supports_credentials' => true,
'paths' => ['api/*']

关键参数说明：allowed_headers必须包含Authorization，允许前端传递 JWT 令牌；supports_credentials设置为true，允许跨域请求携带凭证。2023 年 4 月 12 日的 SpringBoot 项目也采用相同配置思路。

步骤四：响应拦截器处理 401 错误

添加响应拦截器统一处理认证失败。2023 年 6 月 14 日的实战方案：

apiClient.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response && error.response.status === 401) {
      localStorage.clear();
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

处理逻辑：清除本地信息，跳转登录页，避免用户停留在无权限状态。

注意事项

1. 预检请求问题：2025 年 9 月 29 日资料指出，跨域请求时 OPTIONS 预检请求不会携带 JWT 令牌，后端需对 OPTIONS 请求放行，不验证认证头。

2. Token 存储安全：若将 JWT 存储在 Cookie 中需配置withCredentials，但会引入 CSRF 风险；使用 Authorization 头传递更安全，但会触发复杂请求的预检机制。

3. 拦截器顺序：2023 年 6 月 14 日强调，请求发送之前先执行请求拦截，请求响应回来内容之前再执行响应拦截，顺序错误会导致认证头未正确添加。

4. 配置返回：2025 年 5 月 23 日资料特别提醒，确保在修改配置后返回 config 对象，否则请求无法正常发送。

5. 超时设置：2024 年 8 月 15 日教程建议设置请求超时时间，示例中使用timeout: 1000毫秒，避免请求长时间挂起。

参考来源

来源：CSDN 博客 - axios 认证与授权:JWT、OAuth 和 Basic Auth 完整实现指南（2025 年 11 月 14 日）

来源：CSDN 博客 - Vue 项目中使用 Axios 拦截器实现 JWT 令牌认证（2025 年 11 月 20 日）

来源：CSDN 博客 - 解决 JWT 跨域认证问题：tymon/jwt-auth CORS 配置（2025 年 9 月 29 日）

来源：CSDN 博客 - 前后端联调实战指南:Axios 拦截器、CORS 与 JWT 身份验证全解析（2025 年 5 月 23 日）