使用Fetch API读取响应标头

Question 1

我在一个具有权限的Google Chrome扩展程序中，"*://*/*"并且试图将XMLHttpRequest切换到Fetch API。

该扩展存储了用户输入的登录数据，该数据曾经直接放入XHR的HTTP Auth的open（）调用中，但是在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进入这些其他字段吗？

Question 2

当您通过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

Question 3

如果不是CORS：

调试时或console.log响应时，提取不显示标头。

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

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

Question 4

从MDN

您还可以通过访问条目Iterator获得所有标头。

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

另外，请记住这一部分：

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

Question 5

为了与不支持ES2015迭代器的浏览器向后兼容（可能还需要获取/承诺polyfill），Headers.forEach函数是最佳选择：

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

在IE11中进行了测试，将Bluebird用作Promise polyfill，将whatwg-fetch用作fetch polyfill。Headers.entries（），Headers.keys（）和Headers.values（）不起作用。

Question 6

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

access-control-expose-headers：headername1，headername2，...

设置此标头后，客户端脚本便能够从响应中读取那些标头（headername1，headername2，...）。

Question 7

还请记住.then()，res.headers.get()如果您解析了响应，则可能需要将其传递给next 。我一直忘了那个...

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()