写在前面

最近在做一个 AI 对话相关的项目，涉及到流式输出的场景。前端需要调用大模型 API，但直接在前端调用会遇到两个关键痛点：

• API Key 暴露的安全风险：一旦将密钥写在前端代码中。使用者可以轻易通过浏览器开发者工具抓取，从而导致滥用和费用失控。
• 跨域问题：浏览器同源策略阻止前端直接请求不同域名的模型服务，导致请求被拦截或返回 502/403 错误。

这篇文章记录了如何通过 BFF层来解决掉上述痛点，并配合 SSE 与 Vite 建立流式对话体验。

什么是 BFF？

BFF，直译即“为前端服务的后端”。它在微服务架构中常见，却一样适用于大前端场景。

传统模式下前端直接调用后端 Java/Go 提供的 RESTful 接口，实现增删改查。但面对流式输出、二进制数据或多接口聚合时前端代码容易膨胀、难以维护。

我们在前端与后端之间加一层 Node 服务：

前端 → Node → 后端

BFF 层可以帮助我们：

• 聚合多个接口的数据；
• 统一处理流式输出的解析逻辑；
• 隐藏敏感的 API Key；
• 解决跨域问题。

SSE 是基于 HTTP 的服务器推送技术，允许服务器向客户端单向推送事件流。相比 WebSocket，它实现更简单、兼容性更好。非常适合大模型以流式方式返回结果的场景。

项目结构一览

stream-bff/
├── src/
│ ├── App.vue # 前端主组件
│ └── main.js # Vue 入口
├── server.mjs # BFF 后端服务
├── vite.config.js # Vite 配置
├── .env.local # 环境变量
├── package.json # 项目依赖
└── readme67.md # 笔记文档

环境配置

安装依赖

pnpm add express dotenv
# 若使用 npm：
# npm i express dotenv

.env.local 管理敏感信息

将 API Key 写入 .env.local并确保该文件已加入 .gitignore防止泄漏：

VITE_DEEPSEEK_API_KEY=your_api_key_here

Vite 代理配置——跨域根源剖析 & 方法

浏览器同源策略要求协议、域名、端口三者全部相同。只要任意一项不匹配，就会触发跨域限制。我们利用 Vite 本地代理把前端请求转发至同源的 BFF 服务，从而规避该限制。老实说，

import { defineConfig } from 'vite';不过，import vue from '@vitejs/plugin-vue';export default defineConfig({
plugins:,server: {
说到proxy，{
再看'/api'，{
target这方面。'http://localhost:3000',// BFF 服务地址
changeOrigin: true,secure: false,rewrite: => path.replace,},},},});

BFF 层实现

Express 服务搭建

import * as dotenv from 'dotenv';import express from 'express';import fetch from 'node-fetch';dotenv.config;const app = express;const PORT = process.env.PORT || 3000;// 简单健康检查
app.get => {
res.send;})，/**
* 流式转发接口
* 前端 -> /api/stream?prompt=xxx
* BFF -> DeepSeek SSE 接口
*/
app.get => {
const { prompt } = req.query;if {
return res.status.json;}
const endpoint = 'https://api.deepseek.com/v1/chat/completions';try {
const upstream = 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',stream: true,messages:,}),});// 若上游返回错误，直接透传给前端
if {
const errMsg = await upstream.text;return res.status.json;}
// 设置 SSE 响应头，让浏览器保持长连接
res.setHeader;res.setHeader;res.setHeader;// 将上游 ReadableStream 按块转发给前端
const reader = upstream.body.getReader;怎么说呢，const decoder = new TextDecoder;while {
const { done,value } = await reader.read;if break，const chunk = decoder.decode;// 每个块都按照 SSE 格式包装：data:
res.write;}
res.end，} catch {
console.error;res.status.json;
}
})，话说回来，app.listen => {
console.log;})，

请求链路示意图

前端 → Vite Proxy
↓ ↓
BFF → DeepSeek SSE API
↑ ↑
隐藏 API Key 跨域已被消除

前端实现

说到主要思路。使用原生 EventSource 接收服务器推送的流式数据，并实时更新 UI。

开启服务步骤

1. 启动 Vite 开发服务器：

npm run dev # 或 pnpm dev、yarn dev

2. 启动 BFF 服务：

node server.mjs # 如需热重载可使用 nodemon -r esm server.mjs

3. 打开浏览器访问
4. 输入提问，即可看到逐字出现的 AI 回答。

踩坑记录 & 常见错误排查教程

#1 “502 Bad Gateway” 出现时怎么办？

• BFF 未启动或监听的端口不一致。确认 ${PORT} 与 Vite proxy.target 配置保持同步。
• proxy.target 地址写错，例如缺少协议或尾部斜杠。
• BFF 报错后没有正确转发错误信息，可在 Express 中打印 Error.stack` 并检查日志。
• If using Docker,ensure network bridge allows container-to-host communication.

#2 “API Key 泄露” 的根本原因与防御措施

• Pain Point：把密钥硬编码进前端源码或放在 .env 中被 Vite 替换后会随打包产出一起发布。
• Solution：BFF 层仅在运行环境读取 .env，本地开发也使用 .env.local；生产环境通过 CI/CD 注入密钥而且只在容器内可见。
• Add rate‑limit & IP whitelist on BFF 方法，以防恶意爬虫直接调用接口消耗额度。
• If you must expose a key to front end,generate a short‑lived token via BFF instead of raw key.
.

#3 “SSE 不断重连” 的排查要点

• A wrong Content‑Type header will cause browsers to treat response as plain text and close connection. Ensure `text/event-stream` is set.
• If upstream stream sends heartbeat comments。forward m unchanged so browser knows connection is alive.
• The server must keep connection open . Do not call `res.end` prematurely.
• CORS preflight may still fire for custom headers—keep request headers minimal .

与常用方法

通过引入 BFF 层，我们成功解决了两大使用者痛点：

1. CORS 跨域阻断：K 使用 Vite 本地代理 + 同源 BFF，使浏览器视为同源请求，无需额外 CORS 配置。
2. Sensitive API Key 泄露：K 将密钥保存在服务器侧。仅通过受控接口转发，明显提高安全性。
3. SSE 流式处理复杂度：K 把读取、拆包、错误处理等逻辑统一封装到 BFF。前端仅负责 UI 渲染，实现职责分离。
4. K 当需要接入多家 LLM 或添加缓存层时只需在 BFF 中增添对应适配器，无需改动任何 UI 页面。
\end{enumerate}

* 这篇文章所用代码均为最小可运行示例，实际生产环境请结合鉴权、限流、日志监控等机制进一步强化安全与可靠性。怎么说呢，*

©2026 AI Flow Demo · Powered by Vue + Vite + Node   GitHub 示例仓库 ↗️<\/a> <\/footer>`