接入 AI API：前端不要直接带着秘密出门

真实场景

AI 留言板增加“帮我润色”按钮。用户输入一句话，模型返回更通顺的版本。

错误做法：React 前端直接携带秘密 API Key 请求模型平台。

正确路线：

浏览器前端
  ↓ POST /api/polish
自己的后端
  ↓ 读取服务器 AI_API_KEY
第三方模型 API
  ↓ 返回生成文本
自己的后端
  ↓ 过滤并返回需要的数据
浏览器前端

前端请求自己的后端

const response = await fetch('/api/polish', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ text })
})

前端没有真实模型 Key。

后端检查用户输入

app.post('/api/polish', async (req, res) => {
  const text = req.body.text

  if (!text || text.length > 500) {
    return res.status(400).json({ error: '文字长度不符合要求' })
  }

  // 再调用模型
})

后端可以控制长度、登录、频率和用户额度。

后端读取密钥并调用外部服务

const apiKey = process.env.AI_API_KEY

if (!apiKey) {
  throw new Error('AI_API_KEY is not configured')
}

随后按照第三方官方 SDK 或 HTTP 文档调用。

Endpoint、Headers、Body 分别是什么

Endpoint    外部服务的具体地址
Headers     身份、内容格式等说明
Body        模型、Prompt、用户文字等请求数据

第三方平台不同，字段和模型名会变化。实现时必须查看当前官方文档，不能只依赖 AI 记忆。

为什么还要自己的后端

保护密钥
限制用户频率和额度
统一输入验证
隐藏第三方差异
记录可控日志
过滤不应返回前端的原始信息

常见失败怎么分

自己的 /api/polish 返回 400

先看前端发送的 text 是否符合你自己的后端要求。

后端日志显示第三方 401

模型 API Key 缺失、无效或属于错误环境。

第三方返回 429

请求过快、额度用完或并发受限。不要无限立即重试。

第三方返回 500 或超时

外部服务暂时失败。后端应该返回可理解错误，并设置合理超时和有限重试。

Network 显示自己的接口 500

打开后端日志看它调用第三方时得到的状态码和错误类型，不要把完整密钥写进日志。

不要把第三方原始错误全部返回用户

后端日志可以保留请求 ID、状态码和脱敏信息；前端只需得到：

{
  "error": "AI_SERVICE_UNAVAILABLE",
  "message": "润色服务暂时不可用，请稍后重试"
}

更完整的 API Key 课程

如果 Endpoint、Headers、API Key 和请求完整过程仍然陌生，继续看API 与 API Key。

为什么不能把模型 API Key 放进 React，再通过隐藏按钮防止别人看到？

答案：React 代码和请求在用户浏览器运行，隐藏按钮不能隐藏代码和 Network。秘密必须由自己的后端读取和使用。