个人网站接入大模型 API 的完整指南

很多个人网站想加一个 AI 对话功能，但第一反应是"前端直接调 API"——这是最危险的做法。

为什么必须走后端代理

API Key 泄露：Key 写在前端代码里等于公开，任何打开网页的人都能在浏览器开发者工具里看到，然后盗刷你的额度。
无法限流：没有后端就完全裸奔，被脚本刷一下，费用瞬间爆炸。
无法统一管理：换模型、加缓存、记日志，都要改代码重新发布。

所以正确架构是：

浏览器 → 你的后端（持有 Key） → 大模型 API

实现步骤

1. 获取 API Key

以 DeepSeek 为例：在 platform.deepseek.com 注册后创建 API Key，存到环境变量里，绝不要写进代码。

2. 后端代理接口

核心代码其实很短——用 fetch 转发，并保持流式输出：

const upstream = await fetch('https://api.deepseek.com/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${process.env.DEEPSEEK_API_KEY}`
  },
  body: JSON.stringify({
    model: 'deepseek-chat',
    messages,        // 来自前端的对话历史
    stream: true     // 开启流式
  })
});

// 把上游的 SSE 流原样转发给浏览器
const reader = upstream.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  res.write(value);
}

3. 前端流式渲染

浏览器用 fetch 读取流，逐字追加到页面：

const resp = await fetch('/api/chat', { method: 'POST', /* ... */ });
const reader = resp.body.getReader();
const decoder = new TextDecoder();
let buffer = '';
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  buffer += decoder.decode(value, { stream: true });
  // 按行解析 SSE：data: {json}，取出 choices[0].delta.content
}

4. 简单限流

内存里维护一个 IP → 时间戳数组，一分钟内超过 N 次直接返回 429。个人站够用，不需要引入 Redis。

换模型怎么换？

国内主流大模型（DeepSeek、通义千问、智谱 GLM、Kimi）都提供 OpenAI 兼容接口，代码只写一套：

换 baseURL
换 apiKey
换 model 名

三个环境变量搞定，这就是"OpenAI 兼容"生态的好处。