$.ajaxSetup 不工作答案

【问题标题】：$.ajaxSetup not working$.ajaxSetup 不工作
【发布时间】：2017-11-13 13:53:47
【问题描述】：

我有以下函数来设置我的 AJAX 请求的标头：

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

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

但这不起作用，当我检查开发人员收费 (F12) 或 Fiddler 中的标头时，我看不到 custon 标头，但是当我在请求上设置标头而不是通过 ajaxSetup效果很好。

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

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

而self.token 不是null。

例如，对于这个请求：

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

这些是标题：

我错过了什么？

【问题讨论】：

我必须问一个显而易见的问题。您实际上是在任何地方调用身份验证函数吗？
@Archer 请查看我编辑的问题。
在avm.authenticate(); 和您的$.get("../API/Users/GetUsers/"); 处设置断点并确保： 1. 实际调用了身份验证。 2. 在获取请求之前调用身份验证。
@YeldarKurmangaliyev 我这样做了，两者的答案都是 - 是的。
在 if (self.token) { 之前，输入 console.log(self.token) 并告诉我你得到了什么

标签： javascript ajax request-headers

【解决方案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}
       });
   }
}

【讨论】：

我认为是一样的，但我试过了，没有帮助:(

【解决方案2】：

$.ajaxSetup 为未来的 Ajax 请求设置默认值。

不建议按照 JQuery 文档中的建议使用它。

无论如何，因为它为将来的调用设置了默认值，所以它必须在依赖于这些默认值的所有 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****************

在那个 plunker 中，通过按 F12 转到 开发者控制台 中的 network 选项卡，并检查$.ajax() 发出的调用中的标题和$.get()

在 plunker 中我观察到（要阅读的要点），

如果呼叫是 $.ajax()，则显示标题，呼叫的 url 是 url，在 $.ajaxSetup 中提到
如果呼叫是 $.get() 则标题未显示，呼叫的 url 是 plunker url 意味着在您的情况下它将是 http://MySite/ 等

$.ajax() 是最可配置的，您可以在其中获得细粒度控制 HTTP 标头等。您也可以直接获得使用此方法访问 XHR 对象。稍微细一点还提供了错误处理。因此可以更复杂和通常是不必要的，但有时非常有用。你必须处理通过回调自己返回数据。

$.get() 只是 $.ajax() 的简写，但抽象了一些配置，为它设置合理的默认值躲着你。将数据返回给回调。它只允许 GET-requests 所以伴随着类似的 $.post() 函数抽象，仅用于 POST

如果需要，只需测试 plunker。

$.ajax() 调用的图像

$.get() 调用的图像

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

希望这会有所帮助:)

【讨论】：

感谢您详细解释的答案，我尝试将 $.get() 更改为 $.ajax() 但仍然是同样的问题...
@user3378165 为您的问题添加一个 plunker。我会解决它或检查我添加的运行良好的 plunker
我检查了你的 plunker，它似乎是正确的，但对我来说这不起作用......
你能对你的问题做一个演示吗？

【解决方案3】：

我最终搬家了：

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

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

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

【讨论】：