Private runtimeConfig (API token)不能用于客户端NUXT 3通用渲染

Question

我正在使用可组合项为 useFetch() 设置默认标头，如下所示：

// ~/composables/useMyFetch.js
export const useMyFetch = (request, opts) => {
  const config = useRuntimeConfig();

  return useFetch(request, {
    baseURL: config.public.BASE_URL,
    headers: {
      "X-API-KEY": useRuntimeConfig().API_TOKEN,
    },
  });
};

我的 nuxt.config.js 文件包括

runtimeConfig: {
  API_TOKEN: process.env.API_TOKEN,
  public: {
    BASE_URL: process.env.BASE_URL,
  },
},

这个 useMyFetch() 可组合项在页面的第一次加载时工作正常。但是导航到其他页面后，它不起作用（403）。我发现这样做的原因是，不在 public runtimeConfig 中的 API_TOKEN 在客户端无法访问（在导航到其他页面之后）。

有没有其他更好的方法来为 useFetch() 设置默认标头？或者有什么办法可以解决这个问题？

Answer 1

让我说清楚，我不确定你的最终目标是什么。如果您需要让 API_TOKEN 远离客户端，则在服务器上创建一个代理，您可以在其中访问它。如果您可以公开 api 密钥，则将其公开。

useFetch

不是为访问服务器参数而设计的，它只是为了能够以相同的方式在客户端和服务器上获取数据。

这里是如何为您的服务设置代理。 在 server/api/otherService/[...path.ts] 中创建一个文件

const config = useRuntimeConfig()

export default defineEventHandler((event) => {
    appendHeader(event, "X-API-KEY", config.API_TOKEN)
    return proxyRequest(
        event,
        `${config.public.BASE_URL}/${event.context.params!.path}`
    )
})

然后你可以在不知道api密钥甚至基本路径的情况下使用

useFetch

const data = useFetch("/api/otherService/my-call")

但是请注意，这样做仍然会暴露对其他一些 api 的访问权限。基本上，your-url/api/otherService 将允许任何恶意用户使用您的 api 密钥访问该其他服务，即使他们没有密钥。因此，我建议针对这种情况创建某种保护措施，尽管我不知道您的目标是什么。