ES6：从CORS fetch调用中检索响应标头

Question

我有一个使用ES6 fetch API调用CORS rest端点的react应用程序。fetch调用正常工作，但是我无法获取从服务器发送的响应头。我可以在Chrome开发工具中看到响应头，所以我知道它们正在返回给我;然而在代码中访问它们似乎对我没有用。以下是代码（它是基本的fetch promise-chaining）：

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提供的帮助！

- Gerb

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/zh-CN/docs/Web/API/Headers/entries

此外，在跨域场景下，只有某些标头对应用程序公开，因此您在Chrome开发工具中看到的并非所有标头都可在应用程序级别上使用。 有关详细信息，请参见此回答：

使用Fetch API读取响应标头

- Karim

---

我尝试过了，但没有成功。response.headers.entries()返回一个空的迭代器。而且，即使我在Chrome DevTools中查看它，response.headers.get('my-custom-header')也返回未定义。非常奇怪。 - Gerb

请注意，在CORS场景中只有一些标头是公开的：https://dev59.com/VFcQ5IYBdhLWcg3wFf49?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa - Karim

Karim，谢谢。我通过让服务器在OPTIONS请求的响应头中添加以下内容来解决了这个问题：response.setHeader("Access-Control-Expose-Headers", "X-Auth-Access"); - Gerb