Question

我有一个使用ES6 fetch API的react应用程序，可以使用CORS调用rest端点。提取调用工作正常，但是我无法获取从服务器发送的响应头。我可以在Chromes devtools中看到响应头，因此我知道它们已经发回给我了。但是对我来说似乎无法使用代码访问它们。这是代码（其基本的获取承诺链）：

fetch(url)
  .then(response => {
    for (let header of response.headers) { < -- - headers is empty
      console.log(header);
    }
    return response;
  });

但是response.headers为空。但是我可以清楚地看到Chrome中的标题。为什么fetch调用阻止我查看它们？我需要什么才能访问这些标头？服务器存储了一些我们希望使用的特定于应用程序的标头。

更新：我能够通过让服务器将其添加到OPTION请求的响应中来解决此问题：

response.setHeader("Access-Control-Expose-Headers", "X-Custom-Header");

现在，在fetch命令的响应上，我可以执行以下操作：

const customHeader = response.headers.get('X-Custom-Header');

谢谢卡里姆（Karim）的帮助！

Answer 1

要获取特定的标头，您需要调用response.headers.get(key)

，可迭代对象是response.headers.entries而不是response.headers

for (let header of response.headers.entries()) {
  console.log(header);
}

https://developer.mozilla.org/en-US/docs/Web/API/Headers/entries

此外，在cors场景中，只有一些标头公开给应用程序，因此，您在chrome dev工具上看到的所有标头不一定在应用程序级别可用。有关更多详细信息，请查看以下答案：

Reading response headers with Fetch API

ES6：从CORS提取调用中检索响应头

1 个答案: