React请求Web API时request.Headers.Authorization为空的解决方法

这种情况我之前调试API的时候也碰到过，多半是请求头配置、跨域限制或者中间件干扰的问题，咱们一步步来排查解决：

不管你用fetch还是axios，首先要保证Authorization头确实被加到了请求里，而且格式正确（一般是Bearer + 空格 + token）。

举两个常见的例子：

• 用fetch发送请求：

const token = localStorage.getItem('authToken'); // 假设token存在localStorage里
fetch('https://your-api-domain/api/endpoint', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`, // 注意Bearer后面必须有空格
    'Content-Type': 'application/json' // POST/PUT请求需要这个，GET可以省略
  }
})

这里一定要先console.log(token)确认token不是null或者undefined，很多时候是token没取到导致头为空。

• 用axios发送请求：

const token = localStorage.getItem('authToken');
axios.get('https://your-api-domain/api/endpoint', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
// 如果是全局配置默认头，要确保在请求前设置好
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

如果你的React应用和Web API不在同一个域名下，浏览器的同源策略会拦截自定义请求头，这时候后端必须显式允许Authorization头通过。

以ASP.NET Core为例，你需要在Program.cs里配置CORS：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp", policy =>
    {
        policy.WithOrigins("http://localhost:3000") // 你的React应用地址，生产环境换成正式域名
              .AllowAnyMethod()
              .AllowAnyHeader(); // 或者明确指定允许Authorization：.WithHeaders("Authorization")
    });
});

// 注意要在UseRouting之后，UseAuthorization之前调用UseCors
app.UseCors("AllowReactApp");

如果后端没配置这个，浏览器在发送实际请求前的OPTIONS预检请求里会拒绝传递Authorization头，导致后端拿到的就是null。

• React端的请求拦截器：如果你用了axios的interceptors，要确保没有不小心删掉Authorization头。比如：

axios.interceptors.request.use(config => {
  // 这里打印一下headers，确认Authorization存在
  console.log('Request headers:', config.headers);
  return config;
}, error => {
  return Promise.reject(error);
});

• 浏览器插件：有些隐私保护、广告拦截插件会屏蔽Authorization头，你可以试试在隐身模式下测试请求，排除插件干扰。

最后确认后端有没有正确读取请求头。比如在ASP.NET Core的Controller里：

[HttpGet]
public IActionResult GetData()
{
    var authHeader = Request.Headers.Authorization;
    // 也可以用[FromHeader]特性直接绑定
    // public IActionResult GetData([FromHeader(Name = "Authorization")] string authHeader)
    if (string.IsNullOrEmpty(authHeader))
    {
        // 这里就是你碰到的情况，回到前面的步骤排查
        return Unauthorized();
    }
    // 后续逻辑
}

注意.NET的Request.Headers是不区分大小写的，所以不管你前端写的是authorization还是Authorization都能读到，但最好统一用标准的首字母大写格式。

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