在 JavaScript 中访问网页的 HTTP 标头

小编典典

在 JavaScript 中访问网页的 HTTP 标头

all

如何通过 JavaScript 访问页面的 HTTP 响应标头？

阅读 90

2022-03-14

共1个答案

小编典典

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

对于 AJAX 请求：

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

myXMLHttpRequest.getAllResponseHeaders();

该 API 在 XMLHttpRequest 的以下候选建议中指定：XMLHttpRequest - W3C 候选建议 2010 年 8 月 3 日
具体来说，该getAllResponseHeaders()方法在以下部分中指定：w3.org: XMLHttpRequest: the getallresponseheaders()method
MDN 文档也很好：developer.mozilla.org:XMLHttpRequest。

这不会为您提供有关原始页面请求的 HTTP 响应标头的信息，但它可以用于对这些标头进行有根据的猜测。更多内容将在接下来描述。

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

这个问题是几年前首次提出的，专门询问如何获取 当前页面 的原始 HTTP 响应标头（即运行 javascript 的同一页面）。这是一个与简单地获取任何
HTTP 请求的响应标头完全不同的问题。对于初始页面请求，标头不适用于 javascript。如果您通过 AJAX
再次请求同一页面，您需要的标头值是否可靠且足够一致将取决于您的特定应用程序。

以下是解决该问题的一些建议。

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
标头（例如navigator.userAgent，设置为 HTTPUser- Agent标头字段的值）。通过嗅探可用的属性，您可能能够找到您需要的东西，或者一些指示 HTTP 响应所包含内容的线索。

3. 把它们藏起来

如果您控制服务器端，则可以在构建完整响应时访问您喜欢的任何标头。值可以与页面一起传递给客户端，隐藏在一些标记中，或者可能是内联的 JSON
结构。如果您想让每个 HTTP 请求标头都可用于您的
javascript，您可以在服务器上遍历它们并将它们作为隐藏值发送回标记中。以这种方式发送标头值可能并不理想，但您当然可以针对您需要的特定值执行此操作。这个解决方案也可以说是低效的，但如果你需要它，它可以完成这项工作。

2022-03-14