为什么 Fetch API 调用没有返回响应 headers？

Question

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

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 服务器发送的响应 Headers。

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

谢谢

Answer 1

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

如果响应不包含 Access-Control-Expose-Headers header 的值，唯一的响应 headers 浏览器将允许您从 client-side JavaScript 中访问您的网络应用是 Cache-Control， Content-Language, Content-Type, Expires, Last-Modified 和 Pragma.

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

为什么 Fetch API 调用没有返回响应 headers？

Why is Fetch API call not returning the response headers?

javascript

fetch

cors

reactjs

fetch-api