使用 Fetch API 读取响应标头

Question

我在具有 "*://*/*" 权限的 Google Chrome 扩展程序中，我正在尝试从 XMLHttpRequest 切换到 Fetch API 。

该扩展存储用户输入的登录数据，这些数据以前直接放入 XHR 的 open() 调用中以进行 HTTP 身份验证，但在 Fetch 下不能再直接用作参数。对于 HTTP Basic Auth，规避此限制是微不足道的，因为您可以手动设置 Authorization 标头：

 fetch(url, {
  headers: new Headers({ 'Authorization': 'Basic ' + btoa(login + ':' + pass) })
  } });

然而， HTTP Digest Auth 需要更多的交互性；您需要阅读服务器通过其 401 响应发送给您的参数，以制作有效的授权令牌。我尝试使用以下代码片段读取 WWW-Authenticate 响应标头字段：

 fetch(url).then(function(resp) {
  resp.headers.forEach(function(val, key) { console.log(key + ' -> ' + val); });
}

但我得到的只是这个输出：

 content-type -> text/html; charset=iso-8859-1

这本身是正确的，但根据 Chrome 的开发者工具，它仍然缺少大约 6 个字段。如果我使用 resp.headers.get("WWW-Authenticate") （或与此相关的任何其他字段），我只会得到 null 。

是否有机会使用 Fetch API 访问其他字段？

原文由 jules 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您通过 CORS 使用 Fetch API 时，访问响应标头存在限制。由于此限制，您只能访问以下标准标头：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

当您为 Google Chrome 扩展程序编写代码时，您使用的是 CORS ，因此您无法访问所有标头。如果您控制服务器，则可以在响应中返回自定义信息 body 而不是 headers

有关此限制的更多信息 - https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types

原文由 Raj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果不是 CORS：

Fetch 在调试时不显示标头，或者如果您响应 console.log 响应。

您必须使用以下方式访问标头。

 response.headers.get('x-auth-token')

原文由 Nitin Jadhav 发布，翻译遵循 CC BY-SA 4.0 许可协议