React项目中使用Fetch获取响应头Authorization令牌失败求助

问题根源 #

你遇到的情况是CORS（跨域资源共享）的默认限制导致的：浏览器本身能接收到Authorization响应头，但出于安全考虑，只有被后端明确标记为可暴露的响应头，才能被前端的JavaScript代码（比如Fetch API）访问到。Authorization不在CORS默认允许暴露的头列表里，所以即使Network面板能看到，Fetch也拿不到。

解决方法 #

需要分两步操作：

1. 后端配置：暴露Authorization响应头

后端必须在登录接口的响应中添加Access-Control-Expose-Headers头，明确允许前端访问Authorization。以下是几种常见后端框架的配置示例：

• Node.js/Express：

  // 在登录接口的响应逻辑中添加
  res.setHeader('Access-Control-Expose-Headers', 'Authorization');
  res.setHeader('Authorization', 'Bearer your-token-content');
  

• Java Spring Boot：

  // 在接口方法上添加跨域配置并设置响应头
  @CrossOrigin(exposedHeaders = "Authorization")
  @PostMapping("/login")
  public ResponseEntity<?> login(@RequestBody LoginRequest request) {
      HttpHeaders headers = new HttpHeaders();
      headers.add("Authorization", "Bearer your-token-content");
      return new ResponseEntity<>(loginResult, headers, HttpStatus.OK);
  }
  

2. 前端代码修正

你的代码里还有两处需要调整：一是body参数需要把对象转为JSON字符串，二是要正确解析响应体数据。修正后的login函数如下：

async login(dataLogin) {
  const response = await fetch(`${API_URL}/login`, {
    method: "post",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(dataLogin) // 将登录参数转为JSON字符串
  });

  // 先校验响应状态是否正常
  if (!response.ok) {
    throw new Error('登录请求失败');
  }

  // 现在可以正确获取Authorization头
  const authToken = response.headers.get('Authorization');
  console.log('获取到的令牌:', authToken);

  // 解析响应体数据
  const data = await response.json();
  // 将令牌和响应数据一起返回方便后续使用
  return { data, authToken };
}

验证 #

完成后端配置和前端代码修正后，重新测试登录接口，就能通过response.headers.get('Authorization')拿到令牌了。

内容的提问来源于stack exchange，提问作者Ali Gonzalo