在前端保护 API 密钥的最快方法（几分钟内）

我们经常在构建网站时利用 CDN 交付的优势（安全性、性能、无需后端基础设施），但我们想要更强大、更动态的功能。增加功能的最佳方式是通过 API；例如电子邮件联系表单、处理外部数据或显示天气预报、航班时刻表、货币汇率等信息。如果我们不想构建后端或添加基础设施来处理这些 API 调用，我们如何快速安全地进行这些 API 集成？我们在哪里保护私有 API 密钥？如果我们不想在允许用户与第三方 API 交互之前进行用户身份验证，该怎么办？答案是KOR Connect，KOR Connect 是一个中间件平台，它允许 CDN 前端以快速简便的方式保护 API 密钥，同时在 API 集成过程中自动部署安全层。好处是它还可以免费使用！

我们将通过集成 Covid 19 追踪器的示例进行讨论。

让我们创建一个 COVID-19 追踪器。为此，我们必须选择要使用的 API。我选择了使用约翰·霍普金斯大学数据的COVID-19 统计 API 。

如果您已经拥有KOR Connect帐户，可以在此处登录，也可以创建新帐户。
首先，点击“+ 连接 API”按钮，在 KOR Connect 上创建 API 连接：

所有连接信息均直接从 RapidAPI 复制。更多关于 API 连接模块的信息，请点击此处。

完成！建立连接后，前往“查看新 API 连接的详细信息”。

现在您将看到由 KOR Connect 生成的安全 API 和公共 API 密钥。您还可以在屏幕左上角调整每个用户的 API 调用速率限制（默认为每秒 5 次调用）。在本例中，我们将使用 KOR Connect 提供的“单 URL 安全类型”。

如果您感兴趣，可以看看Traversy Media 提供的精彩视频教程，了解如何使用 Vue.js 构建网站。（这里是他的 COVID-19 追踪器的代码）。 注意：在本教程中，他使用了公共 API，我们将使用 KOR Connect 轻松将私有 API 集成到我们的网站中。

现在，您只需获取 KOR Connect 提供的安全 URL 和公共 API 密钥（参见上图），并使用它们发出 API 请求即可。以下是获取请求的示例。

fetch("<YOUR-SECURE-URL>", {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "<YOUR-PUBLIC-API-KEY>"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});

就这样，现在您可以开始测试/使用您的 API 集成了。KOR Connect 会自动将连接模式设置为测试模式。当您准备投入生产时，请务必将连接模式切换为生产模式，这将激活安全机制并从允许的域中移除 localhost（更多信息请点击此处）。

就这么简单，现在您的 API 集成无需任何额外的库或配置即可运行。

如果您有兴趣通过证明服务增加更多安全性，请单击此处获取更多说明。

如果您对建立连接后 KOR Connect 端的自动操作感兴趣，可以参考以下链接：机器人控制功能会激活，检查是否存在其他机器人、安全相关的机器人、来自自动浏览器的调用、黑名单来源以及看似并非来自浏览器的用户代理；如果这些调用未通过检查，则会被阻止。此外，KOR Connect 会验证您允许来源的 access-control-allow-origin 标头，并提供每个用户的速率限制器，可以阻止恶意行为者滥用调用，而不会对其他用户造成任何干扰。