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.

You can also extends the ajax jquery function, settng always the header you want and calling always your extended function — fredcrs, Jan 25 '13 at 17:43
Which version of jquery are you using? headers was added in 1.5 — user1333371, Jan 25 '13 at 17:47
Can you add a little more code in how you are setting the headers in the ajax call? Are you expecting a "headers" object in your JSON? Maybe we are confusing HTTP headers and some internal header object you require. — John Koerner, Jan 25 '13 at 19:39

John Koerner · Accepted Answer · 2013-01-25T19:38:00.343

72

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\"");        
    }
});

edited Jan 25 '13 at 19:38

answered Jan 25 '13 at 17:49

John Koerner

37,428
8
84
134

1

This makes complete programmatic sense to me. Honestly, its what I thought would work. But it doesn't, but it would if I just manually add this into the Headers {} for the ajax request. – Trip Jan 25 '13 at 18:13
1

As an example if I were to put `beforeSend` as a function in the AJAX call it won't work. It *only* works if I use `headers` – Trip Jan 25 '13 at 18:32
1

Also I checked the headers in the POST request, and your answer does not post these headers within it nor does it do that if I were to set up this beforeSend within the call itself. Maybe because xhr request headers are different than jQuery AJAX headers? – Trip Jan 25 '13 at 18:40
Headers are sent as part of the http packet, you won't see them in the data of the post. Use a tool like fiddler (That's what I did) to see that the headers are being set. – John Koerner Jan 25 '13 at 18:43
Ajax and AjaxSetup are two different calls and thus may support different options. `beforeSend` exists in both ajax and ajaxSetup, so technically it would work, but you get the global scope when setting it in ajaxSetup. As for headers not working, that is an implementation thing with the jquery team. Maybe they have a reason for it, but as you can see from my answer, adding it yourself is not very hard. – John Koerner Jan 25 '13 at 18:46
Well I went with my answer since its the only one that works.. Unless I'm clearly doing something wrong it seems that there's no way to do this with jQuery yet.. Thanks for your help. – Trip Jan 25 '13 at 18:49
1

Ah ok I figured this out. And it was entirely my fault. I'm using angularJS, and I didn't realize that that framework usurped the entire process of ajax calls. Thanks for your help John! – Trip Jan 25 '13 at 19:41
2

The downside of using $.ajaxSetup is that it will be invoked for all requests (even, for example, if you're using a different library that also uses $.ajax). This may not be desirable for all cross-domain requests. – Blaskovicz Jan 07 '15 at 19:30
1

@Blaskovicz You can add custom logic for that by using the second param of beforeSend event. eg. ` beforeSend: function (xhr, config) { if (config.url.startsWith(MyDomain)) { xhr.setRequestHeader("my-custom-header", "whatever"); } }` – Xaris Fytrakis Feb 06 '20 at 12:23

score 22 · Answer 2 · answered Aug 01 '17 at 20:11

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)

This causing issue in my web app, this headers' value applied multiple time, with comma separated value, when same ajax call fire multiple time, there is any way that we can remove particular headers? — Shah NIral, Feb 04 '19 at 07:32

score -3 · Answer 3 · answered Jan 25 '13 at 18:48

-3

The beforeSend answer does not establish the same header's as adding header directly to the ajax call. So in order for jQuery to do this properly I add this :

headers: myGlobalHeaders

where myGlobalHeaders is a global variable. Unfortunately, I have to write this extra line on every single ajax call. Terrible! Maybe I'll edit the jQuery framework to handle this..

answered Jan 25 '13 at 18:48

Trip

26,756
46
158
277

5

*"Unfortunately, I have to write this extra line on every single ajax call."* - no, you can use `$.ajaxSetup()` – user11153 Jan 19 '15 at 10:23

Can I set a global header for all AJAX requests?

3 Answers3

Linked