如何在Ajax请求中同时添加Bearer与Basic两种Authorization请求头？

问题背景 #

原本通过以下代码配置Bearer Token作为Authorization请求头：

let headerParams = {
    Authorization: "Bearer " + accessToken,
    "X-CSRF-TOKEN": $('meta[name=\"csrf-token\"]').attr("content"),
};
let url = "url.com";
$.ajax({
    type: "GET",
    url: url,
    headers: headerParams,
    success: function (data) {
    },
    error: function (error) {
    },
});

但测试服务器额外要求Basic Auth才能访问，单独使用Basic Auth的代码如下：

let headerParams = {
    Authorization: "Basic " + btoa(username + ": " + password),
    "X-CSRF-TOKEN": $('meta[name=\"csrf-token\"]').attr("content"),
};
let url = "url.com";
$.ajax({
    type: "GET",
    url: url,
    headers: headerParams,
    success: function (data) {
    },
    error: function (error) {
    },
});

尝试过在headerParams中写两个Authorization键，结果后一个会覆盖前一个；也试过在beforeSend中添加Basic Auth，但出现401和500错误，无法同时生效。

解决方案 #

HTTP规范允许在同一个Authorization请求头中包含多个认证凭证，用逗号分隔即可。另外也可以通过XMLHttpRequest的setRequestHeader方法追加凭证，两种方法如下：

方法1：合并到同一个Authorization头 #

直接构造包含两种认证方案的Authorization头值：

let headerParams = {
    // Basic和Bearer凭证用逗号分隔
    Authorization: `Basic ${btoa(username + ":" + password)}, Bearer ${accessToken}`,
    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
};
let url = "url.com";
$.ajax({
    type: "GET",
    url: url,
    headers: headerParams,
    success: function (data) {
        // 处理成功逻辑
    },
    error: function (error) {
        // 处理错误逻辑
    },
});

方法2：用beforeSend追加认证头 #

利用beforeSend回调，通过xhr.setRequestHeader方法追加Basic Auth凭证（该方法会自动将新值与原有Authorization头值合并为逗号分隔的格式）：

let url = "url.com";
$.ajax({
    type: "GET",
    url: url,
    headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        Authorization: `Bearer ${accessToken}`
    },
    beforeSend: function(xhr) {
        // 追加Basic Auth凭证到Authorization头
        xhr.setRequestHeader("Authorization", `Basic ${btoa(username + ":" + password)}`);
    },
    success: function (data) {
        // 处理成功逻辑
    },
    error: function (error) {
        // 处理错误逻辑
    },
});

注意事项 #

• 确保测试服务器支持解析包含多个认证方案的Authorization头，这是HTTP标准允许的行为，但部分老旧或自定义的认证服务可能不支持。
• 使用btoa时注意用户名或密码中包含特殊字符的情况，可能需要先通过encodeURIComponent进行URI编码，避免编码错误。

内容的提问来源于stack exchange，提问作者Mr. Kenneth