CODEWITHSUNDEEP
javascriptxmlhttprequestrequest-headers
Rick Hoving
Rick Hoving

Reputation: 3575

Add custom header from within a prototype

I have prototyped the XMLHttpRequest to add additional functionalities.
But when I try to add a custom header to the call it does not work (no errors and no calls in the chrome developer toolbar)

My code:

(function(){
var originalOpenFunction = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {

    //Add custom header
    this.setRequestHeader('custom-header', 'value');

    originalOpenFunction.call(this, method, url, async, user, pass);
};
})();

$.ajax("http://www.jsfiddle.net");

When I remove the setRequestHeader line, I get the error I expected (cross-origin not allowed).

Note Although I use jquery to test the javascript, the solution to this should be in native javascript.

JsFiddle

Upvotes: 0

Views: 1205

Answers (1)

Halcyon
Halcyon

Reputation: 57719

Expose errors by:

$.ajax("http://www.jsfiddle.net").fail(function (e) {
  console.log(e);
});

You will get:

InvalidStateError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': the object's state must be OPENED.

This means you need to call open() before you call setRequestHeader().

Then you will run into the cross domain issue. Make sure you're not trying to do a cross domain request to an unsupported domain. The shell runs from http://fiddle.jshell.net.

Requesting that domain works (returns HTML).

See: http://jsfiddle.net/HfAZN/3/

Upvotes: 1

Related Questions