How can I send secure API requests from SvelteKit app, without showing API keys on the client side?

在构建基于SvelteKit的应用程序时，确保API密钥不在客户端暴露是非常重要的，这样可以增强应用程序的安全性。以下是一种在不在客户端显示API密钥的情况下从SvelteKit应用程序发送API请求的方法：

1. 使用环境变量存储API密钥

首先，不应该在前端代码中硬编码API密钥。可以使用环境变量来存储这些敏感信息。在SvelteKit中，你可以通过.env文件来管理这些环境变量，然后在项目的svelte.config.js中配置它们：

javascript
import dotenv from 'dotenv';
dotenv.config();

import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';

export default {
    kit: {
        adapter: adapter(),
        vite: {
            define: {
                'process.env.API_KEY': JSON.stringify(process.env.API_KEY)
            }
        }
    },
    preprocess: preprocess()
};

2. 在服务器端处理API请求

为了保护你的API密钥，你应该在服务器端（即在SvelteKit的服务端路由中）处理所有的API请求。你可以在src/routes目录下创建一个端点，比如api/external-data.js，然后在这个文件中处理API请求：

javascript
export async function get(request) {
    const response = await fetch('https://api.example.com/data', {
        headers: {
            'Authorization': `Bearer ${process.env.API_KEY}`
        }
    });
    
    const data = await response.json();
    
    if (response.ok) {
        return { status: 200, body: data };
    } else {
        return { status: response.status, body: data.message };
    }
}

3. 从客户端请求服务器端路由

然后在客户端，你可以请求你设置的服务器端路由，而不是直接请求外部API：

svelte
<script>
    import { onMount } from 'svelte';

    let data;

    onMount(async () => {
        const response = await fetch('/api/external-data');
        data = await response.json();
    });
</script>

{#if data}
    <div>{data.someField}</div>
{/if}

4. 安全配置和部署

确保你的部署配置安全，环境变量没有被泄漏。如果你使用的是Vercel、Netlify之类的平台，可以在它们的环境配置部分安全地添加你的环境变量。

结论

通过将API密钥放在服务器端并通过服务器端路由中介来发送请求，你可以有效地保护你的密钥不被暴露。这种方法不仅加强了应用程序的安全性，还可以带来更好的维护性和可扩展性。