JS/jQuery get HTTPRequest request headers?

Question

Using getAllResponseHeaders in the xhr object, is possible to get all the response headers after an ajax call. But I can't found a way to get the Request headers string, is that possible ?

Why do you need to know what the request headers were on the client? — Quentin, May 09 '12 at 12:17
Why not look at the request headers when they reach the server? Or use a proxy like Charles? — Quentin, May 09 '12 at 12:59
I'm writing a debugger for my platform due to help the developers developing the extra modules for it. The debugger catch all the ajax requests and show all the request informations ( response header, response data, url, state etc...). I just want to add the request headers to have a complete view of the request. — Lwyrn, May 09 '12 at 13:28
It's useful for unit testing as well! So can't use firebug or check on the server — Reza S, Jan 15 '13 at 22:06
I also face this problem. I need to get the MIME type on a chrome in IPad/IPhone. The header in Weinre doesn't show up when I do a specific AJAX call, and server side it turns to image/webp.. while on all other browsers on all other devices this is text/plain.. Resulting to an error Ajax trigger. — Jared Teng, Mar 05 '15 at 16:40

Emil L · Answer 1 · 2012-05-10T11:26:31.650

If this is for debugging purposes then you can just use Firebug or Chrome Developer Tools (and whatever the feature is called in IE) to examine the network traffic from your browser to the server.

An alternative would be to use something like this script:

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

However I think only the headers already defined in headers is available (not sure what happens if the headers are altered (for instance in beforeSend).

You could read a bit more about jQuery ajax at: http://api.jquery.com/jQuery.ajax/

EDIT: If you want to just catch the headers on all calls to setRequestHeader on the XMLHttpRequest then you can just wrapp that method. It's a bit of a hack and of course you would need to ensure that the functions wrapping code below is run before any of the requests take place.

// 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);
}

Now, once the headers have been set on an XMLHttpRequest instance we can get them out by examining xhr.headers e.g.

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

How i write in a previous comment: I'm writing a debugger for my platform due to help the developers developing the extra modules for it. The debugger catch all the ajax requests and show all the request informations ( response header, response data, url, state etc...). I just want to add the request headers to have a complete view of the request. I know it is possible to use integrated browser debugging tools, i just want to give a customized tool. So the request headers can't be catched :( — Lwyrn, May 09 '12 at 13:41
Have you looked at the w3c XMLHttpRequest Spec? http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117 Perhaps you could wrap the XMLHttpRequest object and then capture the headers as they are being set. A bit akward thou. — Emil L, May 09 '12 at 13:44
Yep, it seems it is not possible to catch the request headers — Lwyrn, May 09 '12 at 14:16
It sure is possible, just a bit of a hassle... see my edit for one way to do it. — Emil L, May 10 '12 at 11:30

score 2 · Answer 2 · answered Jan 15 '13 at 22:35

Something you could to is use Sinon's FakeXMLHttpRequest to replace your browser's XHR. It's described in this document on how to use it for testing but I'm pretty sure you can use the module for your debugging purposes.

What you need to do is:

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

And then later on, you can check your requests array for headers by:

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

To access your request headers.

JS/jQuery get HTTPRequest request headers?

2 Answers2

Linked