为什么 Fetch API 调用不返回响应标头？

Question

我正在构建一个注册表单，并有以下 API 调用来发布表单：

const request = new Request('http://localhost:4300/auth/', {
 method: 'POST',
 headers: new Headers({
   'Accept'       : 'application/json',
   'Content-Type' : 'application/json',
 }),
 body: JSON.stringify({ user: data })
});

fetch(request).then(response => {
    console.log(response);
    const auth = response.headers.get('Authorization');
    console.log(auth)
});

问题是response.headers.get('Authorization')作为null. 即使我查看 Chrome 的 Network XHR 请求，我也会看到 API 服务器发送的响应标头。

为什么 React 没有response.headers通过上面的请求向我提供？

谢谢

Answer 1

该值Access-Control-Expose-Headers响应头从该响应http://localhost:4300/auth/必须包括“ Authorization”如果你希望你的请求前端JavaScript代码被允许访问的Authorization响应头值。

如果响应包括为没有价值的Access-Control-Expose-Headers头，唯一的响应标头的浏览器可以让你从客户端JavaScript访问您的Web应用程序是Cache-Control， Content-Language， Content-Type， Expires， Last-Modified 和 Pragma。

有关该规范，请参阅https://fetch.spec.whatwg.org/#cors-safelisted-response-header-name。