使用 JavaScript 和 API 密钥以及基本身份验证访问 API (Billbee)

编程问答 2022-04-30

问题描述

最近我开始使用 API 和 JavaScript。现在为了测试一个“真实的”项目，我想访问存储在名为 Billbee 的商品管理系统中的数据。他们提供 API 并在此处提供简短文档：https://app.billbee.io//swagger/ui/index

为了访问系统中的数据，Billbee 需要：

  1. 包含识别应用程序/开发者的有效 API 密钥。它必须作为 HTTP 标头 X-Billbee-Api-Key 发送
  2. 以基本身份验证 HTTP 标头的形式包含使用 billbee 用户名和 api 密码的有效用户登录

我在其他一些没有 API 密钥和身份验证的 API 上尝试了我的代码，并且成功了。所以可能是认证有问题...

这是我的代码的相关部分：

var username = "***@***.de";
var password = "*******";
let xhr = new XMLHttpRequest();
xhr.open('GET',"https://app.billbee.io/api/v1/orders?tag=Picking",true);
xhr.setRequestHeader("Authorization","Basic " + btoa(username + ":" + password));
xhr.setRequestHeader("X-Billbee-Api-Key","D0A057BD-F2DA-4570-AE07-F051C8A967A6");
xhr.send();

在控制台中，我收到以下错误：

[错误] 预检响应不成功

[错误] XMLHttpRequest 由于访问控制检查而无法加载 https://app.billbee.io/api/v1/orders?tag=Picking。

[错误] 加载资源失败：预检响应不成功（订单，第 0 行）

有什么我遗漏的吗？

感谢观看

解决方法

Access-Control-Allow-Origin 是一个响应头，表示它来自 API。

浏览器正在阻止您，因为出于安全原因，它通常允许来自同一来源的请求。您可能需要在 billbee 上进行一些配置。

apiapijavascriptxmlhttprequestxmlhttprequest