Can I set a global header for all AJAX requests?

Question

This doesn't seem to be working :

$.ajaxSetup({
  headers: {
    Accept: 'application/vvv.website+json;version=1 ',
    Authorization: 'Token token=\"FuHCLyY46\"'
  }
});

I would have thought it would. If I add these filters specifically to my AJAX call then they do work. I'd like to do this globally for all AJAX calls.

Solution 1

I did some additional tests and the code you posted works perfectly. If you have problems with something in how the parameters are setup, you could always to go the beforeSend call and modify the xml request yourself.

$.ajaxSetup({
    beforeSend: function (xhr)
    {
       xhr.setRequestHeader("Accept","application/vvv.website+json;version=1");
       xhr.setRequestHeader("Authorization","Token token=\"FuHCLyY46\"");        
    }
});

Solution 2

It's also possible to do this in a framework-agnostic way by monkey-patching the open method:

var o = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(){
  var res = o.apply(this, arguments);
  var err = new Error();
  this.setRequestHeader('X-Ajax-Stack', JSON.stringify(err.stack));
  return res;
}

In this example I'm sending stack trace information via a header, which allows the backend to know where Ajax requests originated, even if it's from third-party code that doesn't use jQuery.

(Note: careful about headers getting too big)