为什么 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 的网络 XHR 请求，我也会看到 API 服务器发送的响应标头。

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

谢谢

Answer 1

如果您希望允许请求的前端 JavaScript 代码访问 Authorization 响应标头值，则来自 http://localhost:4300/auth/ 的响应的 Access-Control-Expose-Headers response header 值必须包含“Authorization”。

如果响应不包含 Access-Control-Expose-Headers 标头的值，则浏览器允许您从 Web 应用程序中的客户端 JavaScript 访问的唯一响应标头是 Cache-Control， Content-Language, Content-Type, Expires, Last-Modified 和 Pragma.

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