使用 API 密钥通过 fetch 访问 API 时的身份验证

开发
1

嘿！

我正在为一个杂志构建一个无头 WordPress 站点，该杂志的社区位于 Discourse 上，需要将评论集成到文章页面中。我找到了 API 文档，感到非常高兴，因为 iframe 嵌入方案并不完全符合我的需求，因为该网站将支持深色和浅色模式，所以我需要评论模板能够继承根元素的 CSS 变量。

然而，当我尝试直接访问 API（使用 fetch 请求 https://discourseurl.com/t/{id}.json）时，总是遇到速率限制问题。因此，我打算尝试添加 API 密钥并进行身份验证。

我使用了以下代码：

fetch(this.apiUrl, {
        headers: {
          'User-Api-Key': '{来自 Discourse 管理员的用户 API 密钥}',
        },
      })

但无论我使用哪个密钥（甚至尝试使用管理员密钥），都会收到以下错误：

error_type: "invalid_access"
errors: Array [ "Du har inte behörighet att visa den efterfrågade resursen." ]

粗略翻译为：“您无权访问所请求的资源”。

我是否在 API 密钥的使用方式上遗漏了什么？对于请求这些 API 端点而不触发速率限制，推荐的方案是什么？

2

请查看 https://docs.discourse.org/ 页面顶部的“身份验证”部分。其中提供了如何在请求头中设置 API 凭据的示例。您需要在请求头中使用 Api-Key 和 Api-Username。

3

谢谢！真不敢想我怎么会漏掉了认证部分，文档都翻了好几遍 :joy:

不管怎样，我似乎取得了一些进展，但现在在浏览器控制台中遇到了这个问题：
(原因：CORS 预检通道的 CORS 响应头 'Access-Control-Allow-Headers' 中缺少令牌 'api-key')。

我不确定是什么导致的，在论坛里也没找到相关信息。我是不是漏掉了什么？奇怪的是，我在代码中指定的是 ‘Api-Key’ 这个头。有什么建议吗？ :slight_smile:

4

听起来你正在构建一个 JavaScript 应用，并从浏览器发起 API 请求？

推荐的做法是在服务器端向 Discourse 发起 API 调用，让你的 JavaScript 应用与你的服务器通信，就像它与 WordPress 通信一样。这样可以避免任何 CORS 问题。

5

啊，太棒了！这让我去查看了 WP Discourse 的代码，意识到我只需调整一个选项，就能让 WordPress 暴露我需要的 API 端点（通过 API 公开 Discourse 评论）。我只需要稍作调整即可。这真是太好了，非常感谢 :slight_smile:

只是好奇，为什么不建议直接从客户端操作 Discourse API？如果后续有预算，我有一些扩展该项目的想法（例如添加登录功能），并且希望它能与 Discourse API 进行交互。我是否必须将所有请求都通过 WordPress 进行路由呢？:slight_smile: