JS/jQuery 获取 HTTPRequest 请求标头？答案

【问题标题】：JS/jQuery get HTTPRequest request headers?JS/jQuery 获取 HTTPRequest 请求标头？
【发布时间】：2012-05-17 22:55:04
【问题描述】：

在 xhr 对象中使用 getAllResponseHeaders，可以在 ajax 调用后获取所有响应头。但是我找不到获取请求标头字符串的方法，这可能吗？

【问题讨论】：

为什么需要知道客户端上的请求标头是什么？
我正在为我的平台编写一个调试器，以帮助开发人员为其开发额外的模块。调试器捕获所有 ajax 请求并显示所有请求信息（响应标头、响应数据、url、状态等）。我只想添加请求标头以完整查看请求。
这取决于调试器是如何实现的:)
它对单元测试也很有用！所以不能使用firebug或检查服务器
我也面临这个问题。我需要在 iPad/iPhone 的 chrome 上获取 MIME 类型。当我进行特定的 AJAX 调用时，Weinre 中的标题没有显示，服务器端它变成了 image/webp .. 而在所有其他设备上的所有其他浏览器上，这是 text/plain .. 导致错误 Ajax 触发器.

标签： javascript ajax header request request-headers

【解决方案1】：

如果这是出于调试目的，那么您可以只使用 Firebug 或 Chrome 开发人员工具（以及 IE 中调用的任何功能）来检查从浏览器到服务器的网络流量。

另一种方法是使用类似下面的脚本：

$.ajax({
    url: 'someurl',
    headers:{'foo':'bar'},
    complete: function() {
        alert(this.headers.foo);
    }
});

但是我认为只有 headers 中已经定义的标头可用（不确定如果标头被更改（例如在 beforeSend 中）会发生什么。

您可以阅读更多关于 jQuery ajax 的信息：http://api.jquery.com/jQuery.ajax/

编辑： 如果您只想捕获 XMLHttpRequest 上对 setRequestHeader 的所有调用的标头，那么您可以包装该方法。这有点像 hack，当然您需要确保在任何请求发生之前运行下面的函数包装代码。

// Reasign the existing setRequestHeader function to 
// something else on the XMLHtttpRequest class
XMLHttpRequest.prototype.wrappedSetRequestHeader = 
  XMLHttpRequest.prototype.setRequestHeader; 

// Override the existing setRequestHeader function so that it stores the headers
XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
    // Call the wrappedSetRequestHeader function first 
    // so we get exceptions if we are in an erronous state etc.
    this.wrappedSetRequestHeader(header, value);

    // Create a headers map if it does not exist
    if(!this.headers) {
        this.headers = {};
    }

    // Create a list for the header that if it does not exist
    if(!this.headers[header]) {
        this.headers[header] = [];
    }

    // Add the value to the header
    this.headers[header].push(value);
}

现在，一旦在 XMLHttpRequest 实例上设置了标头，我们就可以通过检查 xhr.headers 来将它们取出，例如

var xhr = new XMLHttpRequest();
xhr.open('get', 'demo.cgi');
xhr.setRequestHeader('foo','bar');
alert(xhr.headers['foo'][0]); // gives an alert with 'bar'

【讨论】：

我如何在之前的评论中写道：我正在为我的平台编写一个调试器，以帮助开发人员为其开发额外的模块。调试器捕获所有 ajax 请求并显示所有请求信息（响应标头、响应数据、url、状态等）。我只想添加请求标头以完整查看请求。我知道可以使用集成的浏览器调试工具，我只是想提供一个定制的工具。所以无法捕获请求标头:(
你看过 w3c XMLHttpRequest 规范吗？ w3.org/TR/2012/WD-XMLHttpRequest-20120117 也许您可以包装 XMLHttpRequest 对象，然后在设置标头时捕获标头。你有点尴尬。
是的，似乎无法捕获请求标头
这当然是可能的，只是有点麻烦...查看我的编辑以了解一种方法。

【解决方案2】：

您可以使用 Sinon 的 FakeXMLHttpRequest 替换浏览器的 XHR。 this document 中描述了如何使用它进行测试，但我很确定您可以使用该模块进行调试。

你需要做的是：

var requests;
this.xhr = sinon.useFakeXMLHttpRequest();
this.xhr.onCreate = function(xhr) {
    requests.push(xhr);
}

稍后，您可以通过以下方式检查 requests 数组的标题：

console.log(requests[0].requestHeaders);

访问您的请求标头。

【讨论】：