$.ajaxSetup 不工作

Question

我有以下功能来设置我的 AJAX 请求的 header：

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

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

但这不起作用，当我在开发人员收费 (F12) 或 Fiddler 中检查 headers 时，我在那里没有看到自定义 header，但是当我设置header 在请求上而不是通过 ajaxSetup 它完美地工作。

正在布局页面中调用 authenticate 函数：

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

并且self.token不是null。

例如，对于这个请求：

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

这些是 header：

我错过了什么？

Answer 1

语法应该像

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

即；你可以将你的函数重写为

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

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

Answer 2

$.ajaxSetup 为以后的 Ajax 请求设置默认值。

Its use is not recommended as suggested in the JQuery documentation.

无论如何，因为它为将来的调用设置了默认值，所以它必须在依赖这些默认值的所有 ajax 调用之前执行。例如，如果您没有提及调用的 url，则在 $ajaxSetup 中配置的默认 url 将是调用的 url。如果您进行的调用取决于这些默认值，则此代码

self.authenticate = function () {
    self.token = sessionStorage.getItem(tokenKey);
    var headers = {};
    if (self.token) {
        headers.Authorization = 'Bearer ' + self.token;
        $.ajaxSetup({
            headers: headers
        });
    }
}

必须在进行以下调用之前执行。

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

现在检查这个

***************Plunker for answer******************

在该插件中，按 F12 进入 开发人员控制台 中的网络选项卡，然后检查 $.ajax() 和 $.get()

调用中的 headers

在plunker中我观察到(要读取的点数),

如果调用是 $.ajax()，则显示 headers 并且调用的 url 是 url $.ajaxSetup
如果调用是 $.get()，则 headers 不会显示，调用的 url 是 plunker url 表示在您的情况下它将是 http://MySite/ 等

$.ajax() is the most configurable one, where you get fine grained control over HTTP headers and such. You're also able to get direct access to the XHR-object using this method. Slightly more fine-grained error-handling is also provided. Can therefore be more complicated and often unecessary, but sometimes very useful. You have to deal with the returned data yourself with a callback.

$.get() is just a shorthand for $.ajax() but abstracts some of the configurations away, setting reasonable default values for what it hides from you. Returns the data to a callback. It only allows GET-requests so is accompanied by the $.post() function for similar abstraction, only for POST

了解更多信息

DIFFERENCE BETWEEN $.ajax() and $.get(), $.post()

如果需要，只需测试 plunker。

$.ajax() 调用的图像

$.get() 调用的图像

因此，如果你想设置 headers 只需使用 $.ajax() 而不是 $.get()

希望这对您有所帮助:)

Answer 3

我搬家了：

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

从 Layout 页面到页面本身并解决了问题。

AuthenticationViewModel - 创建一个新的 AuthenticationViewModel 用于登录用户并获取他们的信息。

$.ajaxSetup 不工作

$.ajaxSetup not working

javascript

ajax

request-headers