使用Fetch API读取响应标头

问题描述：

我处于Google Chrome扩展程序，其权限为"*://*/*"，我试图从XMLHttpRequest切换到Fetch API。使用Fetch API读取响应标头

扩展存储用户输入的登录数据，这些数据以前直接放入XHR的open（）调用中进行HTTP身份验证，但在Fetch下不能再直接用作参数。对于HTTP基本认证，避开这种限制是微不足道的，因为你可以手工设置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

这本身是正确的，但是这仍下落不明周围6个领域根据Chrome的开发者工具。如果我使用resp.headers.get("WWW-Authenticate")（或任何其他领域的事），我只得到null。

任何使用Fetch API访问其他字段的机会？

答

当您在CORS上使用Fetch API时，存在对访问响应标头的限制。由于你这种限制，你只能访问下列标准头：

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

@jules CORS的这个限制遵循'access-control-expose-headers'中的值，或者可能是'access-control-allow-headers'（我们把它放在两个中）。 – jacob

'access-control-expose-headers'为我处理从服务器返回的头文件 - 然后头文件可通过获取响应头文件对象获得。 'access-control-allow-headers'用于允许服务器上的请求标题（或者我从服务器收到错误消息） – specimen

这对于Fetch来说不可能实现，但可以通过XmlHttpRequest完成。如果解决方法仍有可能，安全优势如何？ – sebas

答

您也可以通过访问条目迭代器得到所有的标题。

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

而且，记住this部分：

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

呈现相同的输出;只有内容类型的字段。而禁止标题名称的列表似乎只适用于修改，并且“WWW-Authenticate”也未列在其中。 – jules