带有标头的基本身份验证 - 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

该屏幕截图显示“请求方法：选项”，这表明显示的详细信息是针对浏览器自动发出的CORS 预检选项请求，而不是针对您的POST.

您的浏览器Authorization在发出该OPTIONS请求时不会（也不能）发送标头，这会导致预检失败，因此浏览器永远不会继续尝试您的POST.

只要https://pal-test.adyen.com/pal/servlet/Payment/v25/authorise需要对OPTIONS请求进行身份验证，您就无法成功POST。

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

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

Answer 2

PAL 是一种支付授权 API。你永远不想从浏览器调用它。您只想公开您的用户名和密码以在后端代码中发送付款。

在客户端加密中，加密是在浏览器中完成的。然后您将加密的数据发送到您自己的服务器。然后在您的服务器上创建付款授权请求（其中加密数据是元素之一，以及付款金额等）。

如果您能够设法从浏览器运行此操作，您的最终解决方案将允许您的购物者从 JavaScript 层更改金额、货币、支付元数据等。这绝不应该是这种情况。

因此，授权是文档“服务器端”集成部分的一部分：https : //docs.adyen.com/developers/ecommerce-integration?ecommerce=ecommerce- integration# serverside

根据您的服务器端环境，您最喜欢的语言中的 CURL 实现会有所不同，但大多数情况下很容易找到。

亲切的问候，

阿诺德