如何将基本身份验证标头分配给 XMLHTTPREQUEST？

Posted 2023-03-08

【中文标题】如何将基本身份验证标头分配给 XMLHTTPREQUEST？

【英文标题】：How to assign basic authentication header to XMLHTTPREQUEST?

【发布时间】：2016-02-03 23:02:51

【问题描述】：

我已经阅读了很多关于 preflight 和 CORS 的答案，所以请不要发布链接引用我应该阅读的内容。许多答案都是从服务器的角度来看的，但在这种情况下，我是客户。我是否设置了原始标头？我的假设是这是一个简单的请求，对吗？

 req.open("POST", url, true);
 req.setRequestHeader( 'Content-Type',   'application/blahblah' );
 req.setRequestHeader( 'Accept', 'application/blahblah' );
 req.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + pass)); 
 req.send();

但它仍然无法正常工作，我的错误：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'null' 不允许访问。响应的 HTTP 状态代码为 500。

【参考方案1】：

如果要设置授权头

req.setRequestHeader('Authorization','Basic ' + Base64StringOfUserColonPassword);

【讨论】：

req.setRequestHeader("Authorization", "Basic" + Base64.encode(user + ":" + pass)) ??这个函数是从哪里来的？外部库？

其实很抱歉我加了这个：req.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + pass)); 还是不行

window.btoa，不只是 btoa

请看帖子最后的回复。感谢@NickSpicer。 var 调用 = 新 XMLHttpRequest(); invocation.open("GET", url, true, 用户名, 密码); invocation.withCredentials = true;

在纯 javascript 上是：Buffer.from(user + ":" + password).toString('base64');

【参考方案2】：

解决方案：

var req = new XMLHttpRequest();
    req.setRequestHeader('Authorization', 'Basic [base64 encoded password here]' );

【讨论】：

请看帖子最后的回复。感谢@NickSpicer。 var 调用 = 新 XMLHttpRequest(); invocation.open("GET", url, true, 用户名, 密码); invocation.withCredentials = true;

【参考方案3】：

如果将其用于 API 请求，添加 Authorization 标头将首先使 XMLHttpRequest 发送一个 OPTIONS 请求，这可能会被某些 API 拒绝。

要解决这个问题，您还可以这样做：

var invocation = new XMLHttpRequest();
invocation.open("GET", url, true, username, password);
invocation.withCredentials = true;

这将添加授权标头并避免预检请求。

【讨论】：

'http' 的等价物是什么？ (需要('http'))

【参考方案4】：

这篇文章很旧，但为遇到它的其他人回答。

您的授权标头没有任何问题。您面临的问题与 CORS 相关。

您没有自己设置 Origin 标头。浏览器会为您做到这一点。如果您的来源为空，那么我怀疑这是因为您正在从 file:/// 而不是 http:// 运行代码。

【讨论】：

认为我可能遇到了这个问题。你有什么解决办法吗？

至少对于 chrome，使用这个标志 --allow-file-access-from-files 运行浏览器