如何从 SvelteKit 应用程序发送安全 API 请求，而不在客户端显示 API 密钥？

如何解决如何从 SvelteKit 应用程序发送安全 API 请求，而不在客户端显示 API 密钥？

我将 Supabase 用于一个新的 sveltekit 应用程序，带有 this template

目前，我正在客户端传递 Supabase 密钥，如下所示：

const supabase = createClient(
  import.Meta.env.VITE_SUPABASE_URL,import.Meta.env.VITE_SUPABASE_ANON_KEY
)

创建安全后端/API 的最简单方法是什么，以便应用程序可以从 Supabase 获取内容，而无需在客户端显示 Supabase 密钥？

sveltekit 中是否有任何功能可以让我执行此操作？或者我是否需要集成像 Rails 这样的后端？

解决方法

SvelteKit 在两个主要地方支持服务器端代码：

• endpoints
• hooks

浏览器永远无法访问这些代码；只有结果。此外，任何网络调用对客户端都是不可见的，因为它们都发生在服务器上（对于 API 密钥嵌入在 URL 中的情况）。每个 API 的 locals 属性是与所有服务器端部件共享敏感数据（如 API 密钥）的好地方。

一般建议是使用本地端点代理外部 API 调用：

1. 从 SvelteKit pages 获取本地 SvelteKit 端点（而不是直接调用外部 API，如 Supabase）。您可以从页面上的两个不同位置获取端点：
   • <script context="module"> 中的load()（允许在发送/呈现页面之前从服务器端调用 API）
   • 主要<script>
2. 在单例中初始化外部 API。
3. 从端点调用外部 API 并将结果返回到页面。

注意事项：

• SvelteKit 端点是无服务器 lambda 函数的泛化。 （参见 Netlify 或 AWS 口味）
• 端点/挂钩中使用的任何 NPM 模块都必须是 devDependencies。
推荐使用
• fetch()（例如与 axios 相比），尤其是在 load() 中。 load() 提供了一个特殊版本的 fetch()，可以缓存来自服务器端的调用，以便客户端可以重用结果。
• 第 2 步主要是支持无服务器环境，如 Netlify。