转写说明

本文基于已校验的公开原文进行结构化转写与事实梳理，非原文转载。 转写保留可核验的技术事实，并将工程建议与来源观点明确分开。

核心结论

BFF（Backend For Frontend）作为前端与LLM之间的中间层，能够将API Key隔离在服务端，并承担流式数据的转发与格式化工作。前端只需发起普通fetch请求，即可获得处理好的流式文本，无需关注二进制流解码、SSE格式解析等底层细节。该方案将复杂性保留在服务端，从而简化前端代码、提升可维护性。

能力机制

BFF层位于前端与后端服务之间，架构表现为前端至Node运行时再至后端或LLM的链路。BFF由前端团队维护，按需提供适配的数据格式，而非依赖通用后端接口。

流式输出场景中存在几个前端痛点：二进制流对象需要解码、SSE格式需要解析为可读文本、错误处理逻辑复杂、连接状态管理繁琐。将这些逻辑集中到BFF后，前端仅需处理最终文本的渲染。

服务端通过环境变量文件存储API Key，运行时由dotenv模块加载，确保密钥不暴露于前端代码。流式请求通过设置stream参数为true实现，响应体为ReadableStream对象，需逐块读取并透传给前端。

Vite开发服务器内置HTTP代理功能，配置规则后将匹配路径的请求转发至目标服务器。由于代理发生在服务端之间，不受浏览器同源策略限制，前端请求同源地址即可触发转发。

快速开始

项目初始化使用Vite创建Vue项目后，在根目录创建server.mjs作为BFF服务。

BFF服务依赖express和dotenv。服务监听独立端口（如3000），与前端开发服务器（默认5173）分离运行。

环境变量存储在.env或.env.local文件中，通过dotenv.config()加载。API Key写入环境变量名称（如VITE_DEEPSEEK_API_KEY），代码中通过process.env读取。

BFF核心路由接收prompt参数构造请求，携带Authorization头向LLM发送流式请求。响应流通过ReadableStream处理。

Vite代理配置位于vite.config.js的server.proxy字段。匹配规则target指向BFF服务地址，changeOrigin选项确保目标服务器正确识别请求来源。

启动方式为终端分别运行node server.mjs和npm run dev。

生产环境中Nginx配置反向代理时，需设置proxy_buffering off以保证流式数据的实时透传。

适用边界

BFF适用于需要对接多个第三方API、需要处理SSE或WebSocket等特殊协议、需要隐藏API Key等敏感信息、前端需要定制化数据格式的场景。

该方案增加了部署成本与维护复杂度，若项目仅为简单Demo或无需对接外部服务，直接调用API可能更为合适。

核验清单

环境变量文件已创建且包含API Key的环境变量名称。

BFF服务能够正常启动，健康检查路由返回预期响应。

Vite代理配置已生效，前端请求/api前缀的路径可正确转发至BFF。

流式路由已完整实现，包括参数解析、请求构造、流数据透传、错误捕获与响应。

生产环境Nginx配置已设置proxy_buffering off。

前端代码中无硬编码的密钥值，所有敏感信息通过环境变量读取。

来源与核验

  • 原始文章
  • 页面事实以原始来源及其引用的官方资料为准；版本、星标和模型能力会随时间变化。
  • AI Stack 不公开抓取到的全文快照，只发布独立转写与来源入口。

站内链接

相关文章