带有标头的基本身份验证 - Javascript XMLHttpRequest答案

【问题标题】：Basic authentication with header - Javascript XMLHttpRequest带有标头的基本身份验证 - Javascript XMLHttpRequest
【发布时间】：2018-01-13 22:31:58
【问题描述】：

我正在尝试访问需要基本身份验证凭据的 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);

结果

【问题讨论】：

标签： javascript xmlhttprequest cors basic-authentication adyen

【解决方案1】：

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

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

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

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

您的代码告诉您的浏览器它想要发送带有Authorization 标头的请求。
您的浏览器显示，好的，带有 Authorization 标头的请求要求我执行 CORS 预检 OPTIONS 以确保服务器允许带有该标头的请求。
您的浏览器将OPTIONS 请求发送到服务器没有Authorization 标头——因为OPTIONS 检查的全部目的是查看是否可以发送该请求。李>
该服务器看到 OPTIONS 请求，但没有以表明它允许 Authorization 请求的方式对其进行响应，而是使用 401 拒绝它，因为它缺少该标头。
您的浏览器期望 CORS 预检得到 200 或 204 响应，但得到的是 401 响应。因此，您的浏览器会停在那里，并且永远不会尝试来自您的代码的 POST 请求。

【讨论】：

感谢您的回答！但是应该有一种方法可以访问 api。？
您始终可以从后端代码访问它，但是如果它返回正确的访问控制标头，它似乎也打算从在浏览器中运行的前端 JavaScript 代码访问。但这并不意味着它实际上可以。他们的文档没有显示在前端 JavaScript 中使用它的示例，如果需要这样的授权，预检就无法工作

【解决方案2】：

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

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

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

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

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

亲切的问候，

阿诺德

【讨论】：