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

【问题标题】：How to set up Axios and Nuxt runtime config for multiple APIs?如何为多个 API 设置 Axios 和 Nuxt 运行时配置？
【发布时间】：2021-10-30 00:43:46
【问题描述】：

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

我想查询 2 个单独的 API：

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

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

我想我需要大致解释一下 Nuxt publicRuntimeConfig 和 privateRuntimeConfig 以及 Axios baseURL 和 browserBaseURL 如何协同工作。文档对我的解释不够清楚。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

因此，如果我的操作正确，这里的建议是：使用baseUrl 配置 Nuxt 的默认 axios 实例以与 OP 的“自己的后端”对话，然后配置 second axios 实例用于查询单独的“公共 api”，但将该外部服务的 api 密钥存储在 privateRuntimeConfig 中，并以某种方式使第二个 axios 实例仅在服务器端运行？我个人仍然可以肯定使用所有这些部分如何组合在一起的示例，例如 OP。
不，就 axios 而言正好相反（非 nuxt/axios 应该在 serverMiddleware 中）。至于仅在服务器上运行的内容，有一些像 nuxtServerInit 和 serverMiddleware （也许还有别的？）。所以不像你在Nuxt lifecycle 中看到的那样。另外，我手下没有后端，我想这也取决于您的项目，所以是的，不值得花时间在这里自己创建项目 IMO @beporter

【解决方案2】：

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

【讨论】：

这并没有真正回答如何配置 Nuxt 以在服务器和客户端上下文中访问两个不同的 API 的问题。我明白你所说的关于通过你的私有 API 服务器代理来自客户端的请求，但这并没有解决如何配置 Nuxt 以与 second API 服务对话。