React中如何通过Fetch获取并保存响应头中的JWT令牌？

嘿，我瞅了下你的代码，发现几个关键问题导致你拿不到服务器返回的JWT令牌，咱们一步步来修复：

1. 修正回调参数与响应处理逻辑 #

你在then回调里误用了data变量，但实际上第一个参数是response对象，直接访问data.headers完全不对。另外，最好先检查请求是否成功，避免后续逻辑出错：

fetch("http://localhost:8001/api/login", {
  method: 'post',
  headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" },
  body: `username=${this.state.username}&password=${this.state.password}` // 用模板字符串写起来更清爽
})
.then(function (response) {
  // 先确认请求是否成功（状态码在200-299区间）
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  // Fetch的Headers对象不能用点语法直接访问，必须用get()方法拿自定义头
  const jwtToken = response.headers.get('jwt');
  console.log('成功获取JWT令牌：', jwtToken);
  
  // 如果需要处理响应体的JSON数据，再调用response.json()
  return response.json();
})
.then(function (data) {
  console.log('响应体数据：', data);
})
.catch(function (error) {
  console.log('Request failed', error);
});

2. 服务器端必须配置CORS暴露自定义头 #

如果按上面的代码还是拿不到jwt头，十有八九是CORS的锅——浏览器默认只允许客户端访问标准响应头（比如Content-Type），自定义的jwt头需要服务器明确授权暴露。

你得在服务器的响应头里添加这一行：

Access-Control-Expose-Headers: jwt

只有这样，客户端才能通过response.headers.get('jwt')获取到这个自定义头。

3. 把JWT令牌保存到变量/存储里 #

拿到jwtToken之后，你可以根据需求把它存在组件状态里，或者持久化到localStorage：

// 保存到组件state（适合组件内使用）
this.setState({ jwtToken: jwtToken });

// 或者存到localStorage（页面刷新后依然保留）
localStorage.setItem('authToken', jwtToken);

这样就能顺利获取并保存服务器返回的JWT令牌啦！

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