如何为XMLHTTPREQUEST分配基本身份验证头？

Question

我已经阅读了很多有关预检和CORS的答案，所以请不要发帖引用我应该阅读的内容。 很多答案都是从服务器的角度来看的，但在这种情况下，我是客户端。 我需要设置origin头吗？ 我的假设是这是一个简单的请求，我是对的吗？

 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' 标头。因此，不允许访问来自 'null' 的源。响应的 HTTP 状态码为 500。

- carrots

Answer 1

如果您想设置授权标头

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

- epascarello

---

req.setRequestHeader("Authorization", "Basic " + Base64.encode(user + ":" + pass)) 这段代码是从哪里来的？是一个外部库吗？ - carrots

实际上，抱歉我添加了这一行代码：req.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + pass)); 但它仍然不起作用。 - carrots

window.btoa，不仅是btoa。 - Ronnie Royston

请查看帖子中的最后一条回复。感谢@NickSpicer。var invocation = new XMLHttpRequest(); invocation.open("GET", url, true, username, password); invocation.withCredentials = true; - SanjiMika

在纯JavaScript中，它是这样的：Buffer.from(user + ":" + password).toString('base64'); - Agustín Clemente

Answer 2

解决方案：

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

- carrots

---

请查看帖子中的最后一条回复。感谢@NickSpicer。var invocation = new XMLHttpRequest(); invocation.open("GET", url, true, username, password); invocation.withCredentials = true; - SanjiMika

Answer 3

这篇文章有点旧了，但是我会回答任何其他遇到类似问题的人。

你的授权头没有问题。你面临的问题是CORS（跨域资源共享）相关的。

不需要自己设置Origin头。浏览器会代替你设置它。如果你的origin是null，那么我猜测这是因为你正在使用file:///而不是http://运行你的代码。

- skinnysoftware

---

我觉得我可能遇到了这个问题。你有什么解决方案吗？ - Foxhound

至少对于Chrome浏览器，使用此标志--allow-file-access-from-files运行浏览器。 - Dovev Hefetz

Answer 4

如果您将其用于API请求，则添加Authorization头将首先使XMLHttpRequest发送OPTIONS请求，这可能会被某些API拒绝。为了解决这个问题，您还可以执行以下操作：

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

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

- Nick Spicer

---

http 的等效模块是什么？（require('http')） - Agustín Clemente