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

Question

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

我想查询 2 个独立的 API:

1. 我自己的后端，带有用户身份验证(例如 JWT)，使用 Nuxt serverMiddleware 构建
2. 需要帐户并提供 API key 的公共(public) API(例如 TMDB)

我自己的后端充当公共(public) API 的“扩展”，以便我可以为我的用户存储额外的数据。

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

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

Answer 1

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

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