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

该屏幕截图显示“请求方法： OPTIONS”，表示显示的详细信息适用于您的浏览器自动生成的CORS preflight OPTIONS request，而不是$response['actions'] = admin.actions (template) 。

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

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

原因是因为这里发生的是：

1. 您的代码告诉您的浏览器，它希望使用POST标题发送请求。
2. 您的浏览器说，好的，带有Authorization标头的请求要求我执行CORS预检Authorization，以确保服务器允许带有该标头的请求。
3. 您的浏览器会将OPTIONS请求发送到服务器，而不会显示OPTIONS标题 - 因为Authorization检查的全部目的是确定它是否正常发送它。
4. 该服务器看到了OPTIONS请求，但没有以指示它允许OPTIONS请求的方式对其进行响应，而是拒绝使用401，因为它缺少该标头。
5. 您的浏览器需要200或204的CORS预检响应，而是获得401响应。因此，您的浏览器就会停在那里，并且永远不会尝试代码中的Authorization请求。

Answer 2

PAL是付款授权API。您从不想要从浏览器中调用它。您只想公开您的用户名和密码，以便在后端代码中发送付款。

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

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

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

根据您的服务器端格局，您喜欢的语言中的CURL实现会有所不同，但大部分时间都很容易找到。

亲切的问候，

阿诺德·