如何通过JavaScript访问页面的HTTP响应头?
与此问题相关，该问题已被修改为询问访问两个特定的HTTP报头。
相关: 如何通过JavaScript访问HTTP请求报头字段?
当前回答
对于那些寻找一种方法来解析所有HTTP头到一个对象，可以访问作为字典头["content-type"]，我已经创建了一个函数parseHttpHeaders:
function parseHttpHeaders(httpHeaders) {
return httpHeaders.split("\n")
.map(x=>x.split(/: */,2))
.filter(x=>x[0])
.reduce((ac, x)=>{ac[x[0]] = x[1];return ac;}, {});
}
var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = parseHttpHeaders(req.getAllResponseHeaders());
// Now we can do: headers["content-type"]
其他回答
如果我们讨论的是请求标头，您可以在执行xmlhttprequest时创建自己的标头。
var request = new XMLHttpRequest();
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.open("GET", path, true);
request.send(null);
Service worker的解决方案
Service worker能够访问包括头信息在内的网络信息。好处是它可以处理任何类型的请求，而不仅仅是XMLHttpRequest。
工作原理:
在你的网站上添加一个服务人员。 观察正在发送的每个请求。 让service worker使用respondWith函数获取请求。 当响应到达时，读取报头。 使用postMessage函数将header从service worker发送到页面。
工作的例子:
理解服务工作者有点复杂，所以我建立了一个小库来做所有这些工作。可以在github上找到:https://github.com/gmetais/sw-get-headers。
限制:
该网站需要使用HTTPS 浏览器需要支持Service Workers API 同域/跨域策略正在起作用，就像在XMLHttpRequest上一样
(2021)一个没有额外HTTP调用的应答
一般来说，读取顶级HTML导航的任意HTTP响应头是不可能的，如果你控制了服务器(或中间箱)，想要向JavaScript公开一些信息，而这些信息只能通过头来公开:
可以使用Server-Timing报头公开任意键值数据，JavaScript可以读取这些数据。
(*支持的浏览器:Firefox 61, Chrome 65, Edge 79;目前还没有Safari浏览器，也没有在2021年9月发布的计划;没有IE)
例子:
server-timing: key;desc="value"
你可以对多个数据块多次使用这个头文件:
server-timing: key1;desc="value1"
server-timing: key2;desc="value2"
或者使用它的精简版本，在一个标题中公开多个数据，以逗号分隔。
server-timing: key1;desc="value1", key2;desc="value2"
Wikipedia如何使用这个报头来暴露缓存命中/错过的信息:
代码示例(需要考虑在Safari和IE中缺乏浏览器支持):
if (window.performance && performance.getEntriesByType) { // avoid error in Safari 10, IE9- and other old browsers
let navTiming = performance.getEntriesByType('navigation')
if (navTiming.length > 0) { // still not supported as of Safari 14...
let serverTiming = navTiming[0].serverTiming
if (serverTiming && serverTiming.length > 0) {
for (let i=0; i<serverTiming.length; i++) {
console.log(`${serverTiming[i].name} = ${serverTiming[i].description}`)
}
}
}
}
在受支持的浏览器中记录cache = hit-front。
注:
as mentioned on MDN, the API is only supported over HTTPS if your JS is served from another domain, you have to add Timing-Allow-Origin response header to make the data readable to JS (Timing-Allow-Origin: * or Timing-Allow-Origin: https://www.example.com) Server-Timing headers support also dur(header) field, readable as duration on JS side, but it's optional and defaults to 0 in JS if not passed regarding Safari support: see bug 1 and bug 2 and bug 3 You can read more on server-timing in this blog post Note that performance entries buffers might get cleaned by JS on the page (via an API call), or by the browser, if the page issues too many calls for subresources. For that reason, you should capture the data as soon as possible, and/or use PerformanceObserver API instead. See the blog post for details.
这是一个老问题。不确定何时支持变得更广泛，但getAllResponseHeaders()和getResponseHeader()现在似乎是相当标准的:http://www.w3schools.com/xml/dom_http.asp
Allain Lalonde的链接让我很开心。 只是在这里添加了一些简单的html代码。 适用于任何合理的浏览器，年龄加上IE9+和preto - opera 12。
<!DOCTYPE html>
<title>(XHR) Show all response headers</title>
<h1>All Response Headers with XHR</h1>
<script>
var X= new XMLHttpRequest();
X.open("HEAD", location);
X.send();
X.onload= function() {
document.body.appendChild(document.createElement("pre")).textContent= X.getAllResponseHeaders();
}
</script>
注意:你得到第二个请求的头，结果可能不同于最初的请求。
另一种方法是更现代的fetch() API https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch 根据caniuse.com, Firefox 40, Chrome 42, Edge 14, Safari 11都支持它 工作示例代码:
<!DOCTYPE html>
<title>fetch() all Response Headers</title>
<h1>All Response Headers with fetch()</h1>
<script>
var x= "";
if(window.fetch)
fetch(location, {method:'HEAD'})
.then(function(r) {
r.headers.forEach(
function(Value, Header) { x= x + Header + "\n" + Value + "\n\n"; }
);
})
.then(function() {
document.body.appendChild(document.createElement("pre")).textContent= x;
});
else
document.write("This does not work in your browser - no support for fetch API");
</script>
