Javascript 使用fetchapi读取响应头

我在一个Google Chrome扩展中，拥有

“*：//*/*”

的权限，我正在尝试从XMLHttpRequest切换到

扩展存储用户输入的登录数据，这些数据过去直接放在XHR对HTTP Auth的open（）调用中，但在Fetch下不能再直接用作参数。对于HTTP Basic Auth，绕过此限制非常简单，因为您可以手动设置授权标头：

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

但是需要更多的互动性；您需要读取服务器随401响应发送给您的参数，以创建有效的授权令牌。我已尝试使用以下代码段读取

WWW-Authenticate

response-header字段：

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访问其他字段？

来自

您还可以通过访问条目迭代器来获取所有标题

// Display the key/value pairs
for (var pair of res.headers.entries()) {
   console.log(pair[0]+ ': '+ pair[1]);
}

此外，请记住以下部分：

出于安全原因，某些标头只能由用户代理控制。这些头包括禁止的头名称和禁止的响应头名称

---

在CORS上使用Fetch API时，访问响应头有一个限制。由于此限制，您只能访问以下标准标头：

• 缓存控制

• 内容语言

• 内容类型

• 过期

• 上次修改的

• Pragma

当您为GoogleChrome扩展编写代码时，您正在使用，因此无法访问所有标题。如果控制服务器，则可以在响应

正文

中返回自定义信息，而不是

标题

---

有关此限制的更多信息-

为了向后兼容不支持ES2015迭代器（可能还需要fetch/PROMITE polyfills）的浏览器，标题。forEach函数是最佳选项：

r.headers.forEach(function(value, name) {
    console.log(name + ": " + value);
});

在IE11中测试，蓝鸟作为Promise polyfill，whatwg fetch作为fetch polyfill。

---

Headers.entries（）、Headers.keys（）和Headers.values（）不起作用。

要解决此限制问题，添加公开的头名称就足够了

访问控制公开标头：headername1、headername2、

设置此标题后，客户端脚本能够从响应中读取这些标题（headername1、headername2等）。

如果不是CORS： Fetch在调试时或在您

console.log

响应时不显示标题

您必须使用以下方法来访问标题

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

---

还请记住，如果解析响应，则可能需要在

res.headers.get（）

之后将其传递给下一个

.then（）

。我总是忘记那件事

var link
const loop = () => {
  fetch(options)
    .then(res => { 
      link = res.headers.get('link')
      return res.json()
    })
    .then(body => {
      for (let e of body.stuff) console.log(e)
      if (link) setTimeout(loop, 100)
    })
    .catch(e => {
      throw Error(e)
    })
}
loop()

问题是： 您可能认为这是一个前端问题。
这是后端问题。
浏览器将不允许公开授权标题，除非后端明确要求浏览器公开

如何解决这个问题： 这对我有用。
在后端（API），将其添加到响应头：

response.headers.add（“访问控制公开头”，“授权”）

为什么？ 安全性。
防止XSS攻击。
此请求应该是从后端到后端的。
后端会将httpOnly cookie设置到前端。
因此，您网站上的任何第三方JS包都不应访问授权标头。
如果您认为通过前端访问标题是安全的，那么就这样做。
但我建议立即将服务器后端设置的HttpOnly Cookie发送到浏览器

参考：

---

使用迭代器显示相同的输出；仅显示“内容类型”字段。禁止的标题名称列表似乎只适用于修改，并且

WWW-Authenticate

中也没有列出。@jules对CORS的此限制尊重

access-control-expose-headers

中的值，或者可能是

access-control-allow-headers

（我们将其同时放在这两个标题中）.

access control expose headers

对从服务器返回的头文件有效-然后通过fetch-response-headers对象提供头文件。而

access control allow headers

被用来在服务器上允许请求头（或者我从服务器上得到一条错误消息），这有点愚蠢，因为这在Fetch中是不可能的，但在XmlHttpRequest中是可以做到的。如果仍然可以使用变通方法，那么安全优势是什么？@sebas看起来像Chrome（可能还有其他浏览器）对

XmlHttpRequest

施加了相同的限制。当允许头从客户端传递到服务器时，设置

访问控制允许头

（例如

如果匹配

）。当允许将头从服务器传回客户端（例如

ETag

）时，设置

Access Control Expose Headers

）。response.Headers.map在此处显示react native not sure中的所有头。