get SENT headers in an XMLHttpRequest

Question

Trying to get the Request headers from the XHR object, but with no luck, is there a hidden method or property of that object that will expose the headers sent by the browser?

I already know how to set custom request headers and view the response headers, I'm looking to get a list of all REQUEST headers sent, ones created by the browser and my custom ones.

I'm using webkit/chrome, don't care about other browsers.

EDIT: I'm not looking to monitor the request, I'm building a web app and I need to list those headers and display them within the app, please don't tell me about fiddler, firebug and chrome tools, that's not what I'm looking for.

I could but that would make little difference, with any XHR request, can one access the request headers just like you can access the response headers with xhr.getAllResponseHeaders() — Ahmad Nassri, Sep 28 '11 at 04:24
It would seem that you cannot....at least according to the W3C spec. One option might be to have your server return all of the request headers. The other option would be to use the chrome tools to look into the DOM and perhaps chrome has a readable property that you can call via your script. — trydyingtolive, Sep 28 '11 at 05:57
if it was just limited to my server then yeah, I would rely on that, but its not. and Chrome doesn't seem to have any readable property (That I could find) with the sent headers values. — Ahmad Nassri, Oct 11 '11 at 20:58
Ahmad Nassri have you ever discovered why XMLHttpRequest API does not let you inspect the request headers? — masciugo, Jan 13 '22 at 11:59

score 22 · Accepted Answer · edited Oct 11 '14 at 06:08

22

There is no method in the XMLHttpRequest API to get the sent request headers. There are methods to get the response headers only, and set request headers.

You'll have to either have the server echo the headers, or use a packet sniffer like Wireshark.

edited Oct 11 '14 at 06:08

Dan Dascalescu

143,271
52
317
404

answered Sep 27 '11 at 05:00

AmGates

2,127
16
29

Kenneth · Answer 2 · 2011-09-27T19:53:08.567

2

Try using Fiddler Web Debugger.

http://www.fiddler2.com/fiddler2/

You can capture the request that was sent in any browser as well as inspect the request headers, response headers, and even copy a capture sent request and send it out as your own.

edited Sep 27 '11 at 19:53

answered Sep 27 '11 at 05:32

Kenneth

611
2
8
17

4

I need to access the headers in javascript it self, I don't want to monitor the requests externally. – Ahmad Nassri Sep 28 '11 at 04:20

score 1 · Answer 3 · answered Aug 30 '22 at 05:32

1

As the name suggests, sent headers were SENT, (duh)! And the XMLHttpRequest class doesn't store sent headers in RAM or put sent headers in an instance of XMLHttpRequest... which is good for performance.

If you want to get the headers that have been sent, all you need to do is to create a log mechanism.

And since custom request header are created through XMLHttpRequest.prototype.setRequestHeader(), You need to intercept XMLHttpRequest.prototype.setRequestHeader();

var sentHeaders = {}
var originalXMLHttpRequest_setRequestHeader = XMLHttpRequest.prototype.setRequestHeader;

XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
    sentHeaders[header] = value;
    originalXMLHttpRequest_setRequestHeader.call(this, header, value);
}

That's all. No need for external library nor Wireshark. All done within Javascript;

Just make sure the intercept code above executed before any XMLHttpRequest initialization.

Ps. this code will obviously only intercept the custom header created through setRequestHeader(). The XMLHttpRequest itself will set some default headers which can't be accessed through this method.

answered Aug 30 '22 at 05:32

Donovan P

591
5
9

Not sure if the 'down voter' gets notified, but wondering what is wrong with this suggestion. Seems clever. – Terry Jun 21 '23 at 01:09
@Terry, I also wondering why. I was surprised to see this suggestion get a negative reputation. There is also no comment why the down voter gave a negative rep. Is it because I mentioned that we don't need to use wireshark as the accepted answer suggests? – Donovan P Jun 21 '23 at 02:22
Ever figure out how to get 'all' the headers? I get a few but there are a handful more that appear in the Chrome Network debugging tab. – Terry Jun 21 '23 at 11:51
1

Also, I didn't want to hijack 'every' call, so I did a pattern like this (wish this formatted better, but you get the idea): ```js const requestHeaders = {}; const result = await $.ajax({ // more settings... xhr: function () { const xhr = new XMLHttpRequest(); const originalSetRequestHeader = xhr.setRequestHeader; xhr.setRequestHeader = function (header, value) { requestHeaders[header] = value; originalSetRequestHeader.call(this, header, value); }; return xhr; } }); ``` – Terry Jun 21 '23 at 11:57

score -1 · Answer 4 · answered Feb 13 '17 at 22:04

Assuming you are using jQuery, and you're looking for anything attached, but maybe not ALL headers sent, this could help. Not sure if it meets your exact needs, (since the browser tends to add its own things), but if you need to grab your own headers first, this works:

$.ajaxSetup({
    beforeSend: function (jqXHR, settings) {
        if(!(settings.headers && settings.headers.token)) {
            //no token header was set, so set the request header
            jqXHR.setRequestHeader('token', newtoken);
        }
    }
})

get SENT headers in an XMLHttpRequest

4 Answers4

Linked