如何从SvelteKit应用程序发送安全API请求，而不在客户端显示API密钥？
我正在将 Supabase 用于新的 Sveltekit 应用程序，使用此模板
目前，我正在客户端传递 Supabase 密钥，如下所示：
const supabase = createClient(
import.meta.env.VITE_SUPABASE_URL,
import.meta.env.VITE_SUPABASE_ANON_KEY
)
我可以创建安全后端/API 的最简单方法是什么，以便应用程序可以从 Supabase 获取内容，而无需在客户端显示 Supabase 密钥？
Sveltekit 中是否有任何功能可以让我做到这一点？或者我是否需要集成像 Rails 这样的后端？
回答
SvelteKit 在两个主要地方支持服务器端代码：
- 端点
- 钩子
浏览器永远无法访问这些代码；只有结果。此外，任何网络调用对客户端都是不可见的，因为它们都发生在服务器上（对于 API 密钥嵌入在 URL 中的情况）。locals每个 API的属性是与所有服务器端部件共享敏感数据（如 API 密钥）的好地方。
一般建议是使用本地端点代理外部 API 调用：
- 从SvelteKit 页面获取本地 SvelteKit 端点（而不是直接调用外部 API，如 Supabase）。您可以从页面上的两个不同位置获取端点：
load()in<script context="module">（允许在发送/呈现页面之前从服务器端调用 API）- 主要的
<script>
- 在单例中初始化外部 API。
- 从端点调用外部 API 并将结果返回到页面。
笔记：
- SvelteKit 端点是无服务器 lambda 函数的泛化。（请参阅Netlify或AWS风格）
- 端点/钩子中使用的任何 NPM 模块都必须是 devDependencies。
fetch()推荐（例如与 axios），尤其是在load().load()提供了一个特殊版本，fetch()用于缓存来自服务器端的调用，以便客户端可以重用结果。- 第 2 步主要是支持无服务器环境，如 Netlify。
THE END
二维码