如何为多个 API 设置 Axios 和 Nuxt 运行时配置？

Question

我已经通读了 Nuxt.js 环境变量和 Axios 模块的所有文档，但我仍然对如何为我的用例正确设置它们感到困惑。

我想查询 2 个单独的 APIs:

1. 我自己的后端，带有用户身份验证（例如 JWT），使用 Nuxt serverMiddleware 构建
2. a public API 需要帐户并提供 API 密钥（例如 TMDB）

我自己的后端作为 public API 的“扩展”，以便我可以为我的用户存储额外的数据。

现在我的问题是如何设置我的环境变量，以便我可以安全地将动态请求发送到 public API 而不会暴露其私有 API 密钥？我是否需要使用自己的后端作为“代理”并将客户端请求从那里转发到 public API？或者我可以在 SSR 模式 运行 时直接在 asyncData 中发送请求并获取吗？

我想我需要一个关于 Nuxt publicRuntimeConfig 和 privateRuntimeConfig，以及 Axios baseURL 和 browserBaseURL 如何一起工作的一般解释。文档对我解释得不够清楚。

Answer 1

您应该只向您的私人服务器发送请求，并且它应该：

1. 执行逻辑并发送结果（如果是您的自定义端点）
2. 添加 API KEY 进行查询并将查询转发到 public API 如果它是 public API 端点。

Answer 2

这个问题同时混合了很多东西，但没有特定的顺序：

• 您需要 运行 在服务器上进行私人通话并使用 privateRuntimeConfig 即 available only on the server
• fetch() 和 asyncData() 将 运行 同时在服务器端和客户端（可以强制为 运行 仅在客户端 fetchOnServer: false） , 并且将这些放在客户端上不是一个好主意，因为那里的一切都可以 publicly seen
• 如果您想要 axios 的多个实例， 可能有助于设置此
• 如果你想在 serverMiddleware 中使用 axios 你需要安装并导入 a regular axios 因为它不在 Nuxt
的范围内
• 在大多数情况下，如果应该从前端使用 API，您有时可以使用 public API 键 提供（可以存储在 publicRuntimeConfig 中），如果它应该保密，则需要一个后端将其隐藏在
之间
• baseURL 几乎是默认值，如文档中所述，browserBaseURL 主要是特定于客户端请求的覆盖，如果您需要不同的东西并覆盖，请使用它baseURL 一个
• 有几个问题可以 关于如何在使用 SPA 时隐藏一些调用（常见问题），Nuxt3 的传入 edge-side rendering 可能对这个有帮助
• 要记住的一件事是，只有第一次初始到达服务器才会 运行 服务器查询，其他一切都将是水合 SPA 应用程序，这意味着您在之后将无法返回服务器水合步骤（就像 MPA Wordpress 服务器会做的那样）