在JavaScript中访问网页的HTTP头

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

这个问题有关, 这个问题被修改为询问访问两个特定的HTTP头。

有关:
如何通过JavaScript访问HTTP请求头域?

无法读取当前标题。 您可以对同一个URL进行另一个请求并读取它的标题,但不能保证标题完全等于当前。


使用以下JavaScript代码通过执行get请求来获取所有HTTP标头:

 var req = new XMLHttpRequest(); req.open('GET', document.location, false); req.send(null); var headers = req.getAllResponseHeaders().toLowerCase(); alert(headers); 

不幸的是,没有一个API可以为您的初始页面请求提供HTTP响应头。 这是在这里发布的原始问题。 它也一再被问到 ,因为有些人希望得到原始页面请求的实际响应标题而不发布另一个。

对于AJAX请求:

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

 myXMLHttpRequest.getAllResponseHeaders(); 
  • API在以下XMLHttpRequest候选build议中被指定: XMLHttpRequest – W3C候选build议2010年8月3日

  • 具体而言, getAllResponseHeaders()方法在以下部分中指定: w3.org: XMLHttpRequestgetallresponseheaders()方法

  • MDN文档也很好: developer.mozilla.org: XMLHttpRequest

这不会为您提供有关原始页面请求的HTTP响应标头的信息,但可以用来对这些标头是什么进行有根据的猜测。 接下来介绍更多。

从初始页面请求获取标题值:

这个问题是几年前问的第一个问题,具体询问如何获取当前页面的原始HTTP响应头(即,运行javascript的同一页面)。 这是一个非常不同的问题,而不是简单地获取任何HTTP请求的响应头。 对于最初的页面请求,头文件并不是很容易提供给javascript。 如果您通过AJAX再次请求相同的页面,您所需要的标题值是否可靠和充分一致取决于您的特定应用程序。

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

1.请求资源基本上是静态的

如果响应在很大程度上是静态的,并且头文件在请求之间预计不会发生太大的变化,那么可以对当前所在的页面发出一个AJAX请求,并假定它们是页面的一部分HTTP响应。 这可以让你使用上面描述的很好的XMLHttpRequest API来访问你需要的头文件。

 function fetchSimilarHeaders (callback) { var request = new XMLHttpRequest(); request.onreadystatechange = function () { if (request.readyState === 4) { // // 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设置为HTTP User-Agent标题字段的值)。 通过嗅探可用的属性,你可能能够find你需要的东西,或者一些线索来指示HTTP响应包含的内容。

藏起来

如果您控制服务器端,则可以在构build完整响应时访问您喜欢的任何标头。 值可以通过页面传递给客户端,存储在一些标记中,或者也可以以内联的JSON结构存储。 如果您希望每个HTTP请求标头都可用于您的JavaScript,则可以在服务器上遍历它们,并将其作为标记中的隐藏值发回。 以这种方式发送标题值可能并不理想,但是您肯定可以为您所需的特定值执行此操作。 这个解决scheme也可能是无效的,但是如果你需要的话,它可以完成这项工作。

使用XmlHttpRequest你可以拉起当前页面,然后检查响应的http头部。

最好的情况是只做一个HEAD请求,然后检查头文件。

对于这样做的一些例子看看http://www.jibbering.com/2002/4/httprequest.html

只是我2美分。

另一种将标题信息发送到JavaScript的方法是通过cookie。 服务器可以从请求头中提取所需的任何数据,并将其发回到Set-Cookie响应头中 – 并且可以在JavaScript中读取Cookie。 正如keparo所说,最好只做一两个标题,而不是所有标题。

服务人员的解决scheme

服务人员能够访问networking信息,其中包括标题。 好的一面是它可以处理任何types的请求,而不仅仅是XMLHttpRequest。

怎么运行的:

  1. 在您的网站上添加一个服务人员。
  2. 观看正在发送的每个请求。
  3. 使服务工作者用respondWith函数fetch请求。
  4. 当响应到达时,请阅读标题。
  5. 使用postMessage函数将服务工作者的头信息发送到页面。

工作示例:

服务人员的理解有点复杂,所以我build立了一个小型图书馆来完成这一切。 它在github上可用: https : //github.com/gmetais/sw-get-headers 。

限制:

  • 该网站需要在HTTPS上
  • 浏览器需要支持新的Service Workers API
  • 就像在XMLHttpRequest上一样,相同域/跨域的策略正在起作用

如何通过JavaScript访问HTTP请求头域?

如果我们正在讨论Request头,那么在执行XmlHttpRequests时可以创build自己的头。

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

使用mootools,你可以使用this.xhr.getAllResponseHeaders()

您不能访问http标题,但是其中提供的一些信息在DOM中可用。 例如,如果要查看http referer(原文如此),请使用document.referrer。 其他的http头文件可能有其他类似的文件。 尝试使用谷歌search你想要的具体事情,如“HTTP引用JavaScript”。

我知道这应该是显而易见的,但是当我真正想要的是引用者时,我一直在寻找像“http headers javascript”这样的东西,并没有得到任何有用的结果。 我不知道我怎么没有意识到我可以做一个更具体的查询。

这是一个古老的问题。 不知道什么时候支持变得更加广泛,但getAllResponseHeaders()getResponseHeader()现在看起来相当标准: http : //www.w3schools.com/xml/dom_http.asp

我刚刚testing过,这对于我使用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 

像许多人一直在挖网没有真正的答案:(

不过我已经find了可以帮助别人的旁路。 在我的情况下,我完全控制我的networking服务器。 事实上,这是我的应用程序的一部分(见最终参考)。 我很容易在我的http响应中添加一个脚本。 我修改了我的httpd服务器,在每个html页面内插入一个小脚本。 我只在我的页眉构build之后再推一个额外的“js脚本”行,在我的浏览器[我select的位置]从我的文档中设置一个现有的variables,但是也可以使用其他选项。 虽然我的服务器是用nodejs编写的,但我毫不怀疑可以使用PHP或其他技术。

  case ".html": response.setHeader("Content-Type", "text/html"); response.write ("<script>location['GPSD_HTTP_AJAX']=true</script>") // process the real contend of my page 

现在,从我的服务器加载的每个html页面都有由接收方的浏览器执行的脚本。 然后我可以很容易地从JavaScript中检查variables是否存在。 在我的用例中,我需要知道是否应该使用JSON或JSON-Pconfiguration文件来避免CORS问题,但同样的技术可以用于其他目的[即:在开发/生产服务器之间进行select,从服务器获取REST / API钥匙等….]

在浏览器中,你只需要直接从JavaScript中检查variables,就像在我的例子中那样,我用它来select我的Json / JQueryconfiguration文件

  // Select direct Ajax/Json profile if using GpsdTracking/HttpAjax server otherwise use JsonP var corsbypass = true; if (location['GPSD_HTTP_AJAX']) corsbypass = false; if (corsbypass) { // Json & html served from two different web servers var gpsdApi = "http://localhost:4080/geojson.rest?jsoncallback=?"; } else { // Json & html served from same web server [no ?jsoncallback=] var gpsdApi = "geojson.rest?"; } var gpsdRqt = {key :123456789 // user authentication key ,cmd :'list' // rest command ,group :'all' // group to retreive ,round : true // ask server to round numbers }; $.getJSON(gpsdApi,gpsdRqt, DevListCB); 

谁想要检查我的代码: https : //www.npmjs.org/package/gpsdtracking