javascript - 带有 header 的基本身份验证 - Javascript XMLHttpRequest

Question

我正在尝试访问需要基本身份验证凭据的 Adyen 测试 API。 https://docs.adyen.com/developers/ecommerce-integration

我的凭据在通过浏览器访问 API 页面时有效。

但在尝试使用 XMLHttpRequest POST 请求访问 API 时，我收到了 401 Unauthorized 响应。

Javascript 代码

var url = "https://pal-test.adyen.com/pal/servlet/Payment/v25/authorise";

var username = "ws@Company.CompanyName";
var password = "J}5fJ6+?e6&lh/Zb0>r5y2W5t";
var base64Credentials = btoa(username+":"+password);

var xhttp = new XMLHttpRequest();
xhttp.open("POST", url, true);
xhttp.setRequestHeader("content-type", "application/json");
xhttp.setRequestHeader("Authorization", "Basic " + base64Credentials);

var requestParams = XXXXXXXX;
xhttp.send(requestParams);

结果

Answer 1

该屏幕截图显示“Request Method: OPTIONS”，表明显示的详细信息是针对 CORS preflight OPTIONS request 的由您的浏览器自动生成——不适用于您的 POST .

您的浏览器不会(也不能)发送 Authorization当它制作时标题 OPTIONS请求，这会导致预检失败，因此浏览器永远不会继续尝试您的 POST .

只要https://pal-test.adyen.com/pal/servlet/Payment/v25/authorise需要对 OPTIONS 进行身份验证请求，你不可能成功POST给它。

原因是因为这里发生的事情是这样的:

1. 您的代码告诉您的浏览器它想要发送带有 Authorization 的请求标题。
2. 您的浏览器说，好的，使用 Authorization 请求 header 要求我进行 CORS 预检 OPTIONS以确保服务器允许带有该 header 的请求。
3. 您的浏览器发送 OPTIONS请求服务器 没有 Authorization header——因为 OPTIONS 的全部目的检查是看是否可以发送。
4. 该服务器看到 OPTIONS请求但不是以表明它允许的方式响应它 Authorization在请求中，它会以 401 拒绝它，因为它缺少该 header 。
5. 您的浏览器期望 CORS 预检响应为 200 或 204，但实际得到的是 401 响应。所以你的浏览器就停在那里，永远不会尝试 POST从您的代码请求。