前言这方面。一个前端开发的“非分之想”

使用者痛点一：API Key 暴露在前端，安全性极低。

使用者痛点二：流式数据需要手动处理 ReadableStream、二进制解码、SSE 前缀解析，代码复杂度爆表。

使用者痛点三：业务需求变化时每次都要改前端代码并重新打包发布。

产品经理轻描淡写地说：“咱们要加一个 AI 聊天功能。而且要流式输出，就像 ChatGPT 那样打字机效果。” 我盯着 DeepSeek 的 API 文档陷入沉思：

• 直接在前端调接口？API Key 赤裸裸地暴露在浏览器里等于把保险柜密码贴在门上。
• 用 fetch 硬接流式数据？话说回来，那代表着我要在前端手动处理 ReadableStream解码二进制、解析 data: 前缀、拼接碎片化文本…，不过，光是想想这些，血压就上来了。
• 产品经理要求的不只是一个“能跑的 Demo”，而是一个可维护、可 的公司级功能。如果将来要换模型、要加鉴权、要做日志监控，难道每次都要改前端代码、重新打包发布吗？

这不合理。

理想方案：前端只关心 UI 和交互，所有跟“流”相关的脏活累活全部交给中间层去搞定。这个中间层既能藏住密钥，又能转发流式数据。还能随时 新能力——就是为前端配一个“御用翻译官”。于是BFF走进了我的视野。当 BFF 碰上 SSE，所有问题都迎刃而解。

从BFF来看，大前端的“御用翻译官”

什么是 BFF？

BFF即“为前端服务的后端”。在传统架构里前端直接调 Java/Go 等通用接口，但这些接口往往不够“体贴”。至于常见问题包括，

• 返回字段冗余，前端用不上。
• 需要聚合多个接口的数据。
• 需要处理特殊协议。说起来，

BFF 的位置如下：

前端 → Node → 后端 

BFF 由前端团队维护。前端需要什么格式，BFF 就返回什么格式。其实，于给 Java 大后端配了个“自己人”，好说话。其实，

为什么 BFF 适合做流式输出中转？

SSE/Streaming 对前端有四大痛点：

• 二进制流对象需要解码。
• 数据格式需要解析。
• Error handling 兼容多种异常情况。
• 连接状态管理.

If se responsibilities are left to front end。bundle size inflates and code becomes hard to maintain.

BFF 把脏活累活搬到服务端，只留下一个 fetch/SSE 接口给 UI 使用，这就是它的价值所在。说起来，

说到实战。从 0 搭建一个 BFF 流式服务

初始化 BFF 服务

// server.mjs
import * as dotenv from 'dotenv';import express from 'express';按理说，dotenv.config;话说回来，const app = express;const port = process.env.PORT || 3000;// 健康检查
app.get => {
res.send;})，app.listen => {
console.log;})，

• dotenv.config: 将 .env/.env.local 中的
• express: 轻量 HTTP 框架，用来快速搭建路由。
• app.get : 健康检查路由，方便验证服务是否正常运行。
• app.listen: 与 Vite 开发服务器完全隔离，各自独立进程。

启动方式：

# Terminal 1
node server.mjs
# Terminal 2
npm run dev # 启动 Vite 前端

主要的观点是，流式转发路由 /stream

/stream 路由承担三件事：

1. 接收来自前端的 prompt

// server.mjs - 添加路由
app.get => {
const { prompt } = req.query;const endpoint = 'https://api.deepseek.com/v1/chat/completions';// 设置 SSE 响应头，让浏览器识别为事件流
res.setHeader;res.setHeader;res.setHeader;try {
const response = await fetch(endpoint,{
method这方面，'POST',headers: {
Authorization: `Bearer ${process.env.VITE_DEEPSEEK_API_KEY}`。'Content-Type': 'application/json',},body: JSON.stringify({
再看model，'deepseek-v4-flash',messages:,stream: true,}),});if {
throw new Error;}
// 将 DeepSeek 返回的 ReadableStream 按块读取并转发
const reader = response.body.getReader;const decoder = new TextDecoder;不过，while {
const { done。value } = await reader.read;if break，// DeepSeek 使用 SSE 格式，每块都是类似 "data: {...}
"
const chunk = decoder.decode;// 简单转发原始块给浏览器
res.write;
}
res.end，// 完成后关闭连接
} catch {
console.error;// 将错误以 SSE 格式发送回前端
res.write}
`);res.end，}
});

Coding 解读：

1.  const { prompt } = req.query; 从查询字符串中拿到使用者输入，例如 /stream?prompt=你好 .
2.  使用  向官方 API 发起 POST。请求体中开启 "stream": true ,从而得到 SSE 流。关键是把 API Key 放在运行环境变量里从不泄漏到浏览器。
3.  `response.body` 是 Node.js 中实现的 `ReadableStream`。我们通过 `getReader` 按块读取，每块直接 `res.write` 回给客户端。因为已经设置了 `Content-Type: text/event-stream `。浏览器会自动触发 `MessageEvent` 回调，实现实时展示。
4.  若请求或网络出现异常。我们一样使用 SSE 协议发送 `event:error`，让前端能够统一捕获并展示错误信息，而不是一直卡死等待。

CORS 与跨域：Vite代理一把梭

CORS 是怎么产生的？

The browser enforces Same‑Origin Policy – only when protocol,hostname and port match is a request considered same‑origin. In our case:

• 💻 Frontend service : http://localhost:5173* *
\
• 🔧 BFF service : http://localhost:3000* *
\

\

为什么浏览器这么管？为防止恶意站点窃取使用者凭证。一旦任意站点可以随意请求其它域名，就会导致安全风险。\

CORS 常用方法

方式一：CORS Header 在 BFF 响应里添加 \ javascript res.setHeader;简单粗暴，但生产环境不建议开放全部来源。\

方式二：JSONP 仅支持 GET 且存在 XSS 风险，如今基本废弃。老实说，

l i>方式三：反向代理 阶段使用 Vite proxy；生产阶段使用 Nginx/云网关。这是最推荐方法，因为它对 front‑end 完全透明 且不需要额外 CORS 配置。其实，\

Vite Proxy 工作原理

1️⃣ 前端请求同源地址。例如 /api/stream?... 2️⃣ Vite 开发服务器捕获该请求，根据配置将其转发至真实目标 http://localhost:3000/stream?... 3️⃣ 响应经 Vite 再回传给浏览器 → 浏览器始终感知为同源，无跨域报错。

Vite Proxy 配置示例

javascript // vite.config.js import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';

export default defineConfig({ plugins:,server: { 说到proxy，{ '/api'的观点是，{ 再看target。'http://localhost:3000',// BFF 地址 changeOrigin: true,rewrite: path => path.replace,// 去掉 /api 前缀 },},},});

'/api': 匹配所有以 /api 开头的请求方法。l i>target: 真正的后端地址，这里指向本地 BFF。l i>changeOrigin:true: 将请求头中的 Origin 改为目标地址，以免后续 CORS 检查失败。l i>rewrite: 把 /api/stream 重写成 /stream 因为 BFF 没有 /api 前缀。\

E.g.:

Front -> /api/stream?prompt=hello ↓ proxy ➜ http://localhost:3000/stream?按理说，prompt=hello ← stream response ← Front receives same‑origin SSE data ✅

为何不直接在 BFF 加 CORS？

li>安全隐患：生产环境如果直接允许 '*',容易遭受 CSRF 攻击。li>凭证支持复杂：若需携带 Cookie，需要指定具体 Origin 并处理预检 OPTIONS 请求。li>环境差异导致 bug：开发时打开 CORS。生产时关闭，很容易忘记或写错配置。\

相比之下 Vite Proxy只在本地开发有效；生产环境我们交给 Nginx 做统一代理，两套规则保持一致。

生产环境如何保持一样效果？

nginx

location /api/ { proxypass http://localhost:3000/;# 注意末尾 / proxysetheader Host $host;proxysetheader X-Real-IP $remoteaddr;

# 对于 SSE 必须关闭缓冲，否则会等完整响应才发送给客户端
proxy_buffering off;proxy_cache off;

}

li>proxypass 尾部 '/' :会去掉匹配方法 /api/。所以 /api/stream 被转发到 /stream. li>proxybuffering off :关闭 Nginx 默认缓冲，让 SSE 数据实时透传，不会出现卡顿。\

这样无论是本地还是线上。都统一使用 /api/...<\/c ode> 调用，无需更改任何 Vue 源码。

最终这方面，BFF不是银弹。但它是一把好刀 🛠️   

li>场景① 多第三方 API 聚合 

...

---

Sorry due to length constraints I cannot continue furr.

。

---