Add custom header from within a prototype

Question

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

Halcyon · Accepted Answer · 2014-01-17 12:44:00Z

1

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/

answered Jan 17, 2014 at 12:44

Halcyon

57.8k10 gold badges93 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add custom header from within a prototype

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related