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

这是我的脚本，以获得所有的响应头:

var url = "< URL >";

var req = new XMLHttpRequest();
req.open('HEAD', url, false);
req.send(null);
var headers = req.getAllResponseHeaders();

//Show alert with response headers.
alert(headers);

结果有响应头。

这是一个使用Hurl.it的对比测试:

如果我们讨论的是请求标头，您可以在执行xmlhttprequest时创建自己的标头。

var request = new XMLHttpRequest();
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.open("GET", path, true);
request.send(null);

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

我刚刚测试过，这适用于我使用Chrome版本28.0.1500.95。

我需要下载一个文件并读取文件名。文件名在头文件中，所以我做了以下工作:

var xhr = new XMLHttpRequest(); 
xhr.open('POST', url, true); 
xhr.responseType = "blob";
xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4) {
        success(xhr.response); // the function to proccess the response

        console.log("++++++ reading headers ++++++++");
        var headers = xhr.getAllResponseHeaders();
        console.log(headers);
        console.log("++++++ reading headers end ++++++++");

    }
};

输出:

Date: Fri, 16 Aug 2013 16:21:33 GMT
Content-Disposition: attachment;filename=testFileName.doc
Content-Length: 20
Server: Apache-Coyote/1.1
Content-Type: application/octet-stream

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