React中Axios携带Access Token请求遇CORS及401错误

错误原因 #

你遇到的是两个关联问题：

1. CORS跨域限制：浏览器拦截了请求，因为后端服务器的响应中缺少Access-Control-Allow-Origin头，导致预检OPTIONS请求失败。
2. 401未授权：后端对OPTIONS预检请求也做了权限校验，但浏览器发送预检请求时不会携带Authorization头，因此直接返回401，进一步加剧了CORS错误。

1. 后端CORS配置修复（核心解决步骤） #

前端无法绕过浏览器的CORS策略，必须由后端配合修改配置：

• 允许前端域名(http://localhost:3000)跨域访问，生产环境禁止用*（带Authorization头时必须指定具体域名）
• 允许携带自定义请求头（如Authorization）
• 跳过OPTIONS请求的权限校验，因为预检请求不会带Token
• 开启跨域凭证支持（如果需要携带Token或Cookie）

以ASP.NET Core为例（匹配你的接口路径风格），配置示例：

// Program.cs 中添加CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowLocalReact", policy =>
    {
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyMethod()
              .AllowAnyHeader()
              .AllowCredentials();
    });
});

// 在认证中间件前启用CORS
app.UseCors("AllowLocalReact");

// 跳过OPTIONS请求的JWT校验
app.Use(async (context, next) =>
{
    if (context.Request.Method == "OPTIONS")
    {
        await next();
        return;
    }
    await next();
});

2. 前端代码优化 #

• Axios是异步请求，需用async/await或.then()处理响应，否则会直接打印Promise对象：

localStorage.setItem("access_token","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmYW1pbHlfbmFtZSI6Itin2YbYtdin2LHZiiIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiLYp9mG2LXYp9ix2YoiLCJuYmYiOjE2NzY0NTMzNTUsImV4cCI6MTY3NjUzOTc1NSwiaXNzIjoibG9jYWxob3N0OjQ0MzQ2IiwiYXVkIjoibG9jYWxob3N0OjQ0MzQ2In0.4w2THPCrSvADow65fEm02H4NWUhGlFblaC6nB6uTgZ8")

async function fetchTestData() {
    try {
        const response = await axios.get('http://192.168.0.254:3333/api/DOTMobileApi/test', { 
            headers: { 
                'Authorization': `Bearer ${localStorage.getItem("access_token")}` 
            } 
        });
        console.log('请求成功:', response.data);
    } catch (error) {
        console.error('请求失败:', error);
    }
}

fetchTestData();

• 可以设置Axios全局拦截器，统一携带Token：

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

3. 401问题排查（CORS修复后仍存在时） #

• 检查Token是否过期：你的Token过期时间为1676539755（北京时间2023-02-16 10:09:15），确认是否已过期
• 验证Token格式：确保Authorization头是Bearer + 空格 + Token的格式
• 检查后端JWT密钥：确认后端验证Token的密钥和生成Token时的密钥一致
• 确认后端是否正确解析Authorization头并完成校验

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