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

Posted 2023-03-04

【中文标题】为啥 Fetch API 调用不返回响应标头？

【英文标题】：Why is Fetch API call not returning the response headers?为什么 Fetch API 调用不返回响应标头？

【发布时间】：2017-12-05 14:46:45

【问题描述】：

我正在构建一个注册表单，并通过以下 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？

谢谢

【参考方案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。

【讨论】：

谢谢，但没有关注... 你是说我需要更新服务器还是客户端？我相当确定问题出在客户端，因为 API 端点以相同的方式与不同的客户端库一起工作。我只是想在 orig 客户端库之外构建注册流程。

例如，客户端库工作正常，这里是源：github.com/timscott/react-devise/blob/master/src/actions/api.js

注意 tryLogin 如何获取 response.headers --- github.com/timscott/react-devise/blob/master/src/actions/…

我正在尝试在该库之外构建我自己的注册表单，虽然 API 响应相同，但我的客户端代码没有得到 response.headers ...有什么想法吗？谢谢

您必须更新您的 api 端点或从同一端口提供您的客户端文件