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上一样

不幸的是，没有一个API为您的初始页面请求提供HTTP响应头。这是最初的问题。它也被反复要求，因为有些人希望获得原始页面请求的实际响应头，而不需要发出另一个页面请求。

对于AJAX请求:

如果HTTP请求是通过AJAX发出的，则可以使用getAllResponseHeaders()方法获得响应头。它是XMLHttpRequest API的一部分。要了解如何应用它，请查看下面的fetchSimilarHeaders()函数。请注意，这是对某些应用程序不可靠的问题的一种变通方法。

myXMLHttpRequest.getAllResponseHeaders();

该API在以下XMLHttpRequest候选推荐中指定:XMLHttpRequest - W3C候选推荐3 2010年8月 具体来说，getAllResponseHeaders()方法在以下部分中指定 MDN文档也很好:developer.mozilla.org: XMLHttpRequest。

这不会为您提供关于原始页面请求的HTTP响应标头的信息，但可以用来对这些标头进行有根据的猜测。下面将详细介绍。

从初始页面请求中获取头值:

This question was first asked several years ago, asking specifically about how to get at the original HTTP response headers for the current page (i.e. the same page inside of which the javascript was running). This is quite a different question than simply getting the response headers for any HTTP request. For the initial page request, the headers aren't readily available to javascript. Whether the header values you need will be reliably and sufficiently consistent if you request the same page again via AJAX will depend on your particular application.

下面是一些解决这个问题的建议。

1. 对资源的请求大部分是静态的

如果响应基本上是静态的，并且请求之间的报头预计不会有太大变化，那么您可以对当前所在的同一页面发出AJAX请求，并假设它们是页面HTTP响应中的相同值。这允许您使用上面描述的XMLHttpRequest API访问所需的标头。

function fetchSimilarHeaders (callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            //
            // The following headers may often be similar
            // to those of the original page request...
            //
            if (callback && typeof callback === 'function') {
                callback(request.getAllResponseHeaders());
            }
        }
    };

    //
    // Re-request the same page (document.location)
    // We hope to get the same or similar response headers to those which 
    // came with the current page, but we have no guarantee.
    // Since we are only after the headers, a HEAD request may be sufficient.
    //
    request.open('HEAD', document.location, true);
    request.send(null);
}

如果您真的必须依赖请求之间的值是一致的，那么这种方法就会有问题，因为您不能完全保证它们是相同的。这将取决于您的特定应用程序，以及您是否知道所需的值不会从一个请求更改到下一个请求。

2. 进行推断

有一些BOM属性(浏览器对象模型)是浏览器通过查看头文件来确定的。其中一些属性直接反映HTTP报头(例如导航器)。userAgent被设置为HTTP User-Agent报头字段的值)。通过嗅探可用属性，您可能能够找到您需要的东西，或者一些指示HTTP响应包含什么的线索。

3.藏

If you control the server side, you can access any header you like as you construct the full response. Values could be passed to the client with the page, stashed in some markup or perhaps in an inlined JSON structure. If you wanted to have every HTTP request header available to your javascript, you could iterate through them on the server and send them back as hidden values in the markup. It's probably not ideal to send header values this way, but you could certainly do it for the specific value you need. This solution is arguably inefficient, too, but it would do the job if you needed it.

向JavaScript发送报头信息的另一种方法是通过cookie。服务器可以从请求头中提取它需要的任何数据，并将它们发送回Set-Cookie响应头中——并且cookie可以在JavaScript中读取。但是，正如keparo所说，最好只对一个或两个头文件执行此操作，而不是对所有头文件执行此操作。

为了获得头部作为一个更方便的对象(改进Raja的答案):

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
headers = headers.split(/\n|\r|\r\n/g).reduce(function(a, b) {
    if (b.length) {
        var [ key, value ] = b.split(': ');
        a[key] = value;
    }
    return a;
}, {});

对于那些寻找一种方法来解析所有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"]

这是一个老问题。不确定何时支持变得更广泛，但getAllResponseHeaders()和getResponseHeader()现在似乎是相当标准的:http://www.w3schools.com/xml/dom_http.asp