BFF 层流式输出：从前端直连到生产级流式网关的架构演进

v039 拆解了 LLM 流式输出的完整技术链路——从 HTTP chunked transfer encoding 到 SSE 协议，从 ReadableStream 的 buffer 管理到 AbortController 的取消机制。但那篇文章的视角是客户端前端如何消费一个流。

读完 v039，你能回答面试官关于“SSE 和 WebSocket 有什么区别”“ReadableStream 怎么处理半截 JSON”这类问题。但如果你停下来想一想，真正的生产程序里前端真的会直接去调 DeepSeek API 吗？

v039 的回答：前端 → LLM
v043 要回答：前端 →?，?→ LLM

第三十九天的学习笔记用一个 Vue + Vite + Express 项目，补上了中间这个“?，?”的答案——BFF。说起来，代码量不大这方面。一个 vite.config.js一个 server.mjs一个 App.vue。但它完成了 AI 应用架构中最关键的一次升级：

v039 的架构：前端直接 fetch LLM API
v043 的架构：前端 fetch BFF → BFF fetch LLM

这篇文章基于 ai/SSE/stream-bff 实践。把 BFF 从“一个 node 文件”推到“生产级流式网关”——不只是多一层转发，而是把安全、跨域、流式管道、限流、多模型路由、协议适配、成本管控全部拆开来讲。

一、三层架构：为什么前端不能直连 LLM

看起来能跑，但其实是三个炸弹

第三十五天我们写了一个前端直接调 DeepSeek API 的页面。按理说，它能跑，控制台能看到流式返回的文字。但这只是 Demo，

生产环境中，前端直连 LLM API 有三个无法绕开的痛点：

• API Key 暴露： 前端代码里的 API Key 对任何打开浏览器 DevTools 的人都是明文。Network 面板 → Request Headers → Authorization: Bearer sk-xxx。一行复制粘贴，你的 Key 就被人薅光了额度。
• CORS 跨域： LLM API 服务器和你的前端部署在不同的域名下。DeepSeek 的 API 允许 CORS 是因为他们做了配置。 但如果你自建模型服务，不大概率会开 CORS。即使开了每个新模型服务都要配一遍。老实说，
• 前端代码膨胀： v039 的流式消费代码有多少？话说回来，buffer 管理、JSON 容错解析、AbortController、重连逻辑、错误分类…，这些逻辑混在 Vue 组件里和 UI 渲染纠缠在一起，改一处可能坏三处。

API Key 泄露是最致命的问题。

一个生产应用可能有几万行前端代码，API Key 存在 .env 文件里——但在 Vite 或 Webpack 建立时VITE_/REACT_APP_ 前缀的环境变量会被直接内联到浏览器端的 JS bundle 中。任何人打开 Sources 面板搜 sk- 就能找到。

// 这段代码最终会被打包到浏览器端的 JS 里
fetch('https://api.deepseek.com/v1/chat/completions'。{
从method来看，'POST',headers: {
'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`,// ← 浏览器可见！'Content-Type': 'application/json'
至于}。body，JSON.stringify
});

三层架构的自然推演

大前端工程师在面对这些痛点时会自然想到：在后端再起一个 Node 服务，把对 LLM 的请求代理过去。

前端 │
│ /api/stream
▼
Node BFF
│
│ https://api.deepseek.com/v1/chat/completions
▼
LLM 服务器

BFF 的主要价值可以浓缩为一句话：

"把不属于前端的复杂度从前端拿走，放到一个专门为前端服务的后端里。"

二、BFF 层的最小定义与第一天职

什么是 BFF

BFF = 为前端服务的后端。

User Pain Point: 传统后‑​backend 团队往往难还有时响应 UI 新需求；BFF 则让大‑​frontend 能够自行迭代接口，实现「业务驱动」而非「网站驱动」。​

BFF 在 AI 流式场景中的第一天职

​

​​​

​​