每个请求的 XMLHttpRequest setRequestHeader答案

【问题标题】：XMLHttpRequest setRequestHeader for each request每个请求的 XMLHttpRequest setRequestHeader
【发布时间】：2016-02-06 08:38:01
【问题描述】：

以下代码自动为所有 jQuery Ajax 请求设置Authorization request header：

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Authorization', 'Bearer ' + jwtoken);
    }
});

对于手动创建的所有 XMLHttpRequest 对象，我想要类似上面的内容。更确切地说，下面的请求没有设置Authorization header。

var xhr = new XMLHttpRequest();
xhr.file = $('myfile')[0].files[0];
var fd = new FormData();
fd.append('fileId', fileId);
xhr.open('post','my-rote', true)
xhr.send(fd);

我不想使用xhr.setRequestHeader('Authorization', 'Bearer ' + jwtoken);，因为当我创建XMLHttpRequest 对象时，变量jwtoken 已被删除。

【问题讨论】：

如果您手动创建，您是唯一控制创建过程的人。使用 jQuery 时，请求由框架创建，因此它可以为您提供自动设置标头的基础设施。当您处于控制之中时，您应该承担责任并为标头注入设置基础设施。唯一的答案就是这样做的 - 所以将其标记为答案。

标签： javascript jquery ajax xmlhttprequest

【解决方案1】：

一种方法是创建一个闭包并在可用时将 jwtoken 传递给它。您可以使用闭包返回的方法来创建 XMLHttpRequest 对象。

var customXMLHttpRequest = (function (jwtoken) {

    function getXMLHttpRequest(method, url, async){
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.open(method, url, async);
        xmlHttpRequest.setRequestHeader('Authorization', 'Bearer ' + jwtoken);
        return xmlHttpRequest;
    }

    return getXMLHttpRequest;
})('Your token');

以下是如何使用此方法获取新的 XMLHttpRequest 对象。

var xmlHttpRequest = customXMLHttpRequest('post','http://www.yoursite.com',true);

此对象将设置标题。

另一种选择是将令牌保存在 cookie 中，并在创建 XMLHttpRequest 时，在从 cookie 中检索它后使用此值。

【讨论】：

谢谢，这对我很有帮助。但是我认为可以使用类似于$.ajaxSetup beforeSend的东西。