$ .ajaxSetup不起作用

Question

I have the following function that set up the headers of my AJAX requests:

self.authenticate = function () {
    self.token = sessionStorage.getItem(tokenKey);
    var headers = {};

    if (self.token) {
        headers.Authorization = 'Bearer ' + self.token;
        $.ajaxSetup({
            headers: headers
        });
    }
}

But this is not working, when I check the headers in the developers toll (F12) or in Fiddler, I don't see the custon header there, but when I set the header on the request and not through ajaxSetup it works perfectly.

The authenticate functions is being called in the Layout page:

$(document).ready(function () {
     var avm = new AuthenticationViewModel();
     avm.authenticate();
});

And self.token is not null.

For example, for this request:

self.getUsers = function (callback) {
    $.get("../API/Users/GetUsers/",callback);
}

these are the headers:

What am I missing?

Answer 1

the syntax should be like

headers: { 'x-my-custom-header': 'some value' }

ie; you may rewrite your functions as

self.authenticate = function () {
    self.token = sessionStorage.getItem(tokenKey);

    if (self.token) {
       //headers.Authorization = 'Bearer ' + self.token;
       $.ajaxSetup({
           headers: {Authorization:  'Bearer ' + self.token}
       });
   }
}