把 RelayRouter 的 SSE 流安全转发给 React 前端

要把 RelayRouter 的 SSE 流安全转发给 React 前端，应在自己的后端保存 API Key，由后端以 Authorization: Bearer YOUR_API_KEY 调用 RelayRouter 的流式接口，再把收到的数据块原样转发给浏览器。React 只请求自己的后端路由，并用 fetch 的 ReadableStream 逐段读取和渲染。这样密钥不会出现在前端代码或浏览器网络请求中。

为什么不能让 React 直接调用 RelayRouter

React 不应直接调用 RelayRouter，因为浏览器端代码和请求头对用户可见，API Key 会被泄露。RelayRouter 使用 Authorization: Bearer YOUR_API_KEY 鉴权，密钥在 https://relayrouter.io/dashboard 创建。拿到密钥的人可以直接消耗账户额度。推荐的结构是三层：React 前端、自有后端代理、RelayRouter。后端负责保管密钥、校验用户身份、限制可调用的模型 id，再把流式响应转发出去。这样即使前端代码被完整查看，攻击者也只能访问你暴露的受控路由，无法拿到上游凭证。

后端应调用哪个接口发起流式请求

后端可以按现有 SDK 选择三种协议中的任意一种发起流式请求。据 relayrouter.io 官方文档，RelayRouter 「同时兼容 OpenAI、Anthropic 与 Gemini 三种协议」，并且支持流式输出。各协议的入口如下表，详细说明见 https://relayrouter.io/docs。

据 relayrouter.io/docs 官方文档，迁移时 「保留现有 SDK,改 base_url 与 key 即可,无需改其他代码」，因此后端原有的流式处理逻辑可以继续使用。

如何实现安全的转发链路

实现安全转发，核心是让后端只做受控的透传，并在上下游两端都处理中断。可按以下步骤操作：

1. 在服务端环境变量中保存 RelayRouter 的 API Key，不写入前端构建产物。
2. 新建后端路由（例如 /api/chat），先校验登录状态，再对允许的模型 id 做白名单检查，例如只允许 claude-opus-5-5 或 gpt-5.6-sol。
3. 后端使用 SDK 的流式模式请求 RelayRouter，并设置响应头 Content-Type: text/event-stream、Cache-Control: no-cache。
4. 把每个上游数据块写入响应。客户端断开时，同步中止上游请求，避免继续生成。
5. React 端用 fetch 读取 response.body.getReader()，逐段解码后追加到状态中；组件卸载时调用 AbortController.abort()。

不要把上游原始错误详情直接返回给浏览器，应在后端记录日志，前端只展示通用提示。

流式调用的成本如何估算

流式调用与普通调用按相同规则计费，可以在 https://relayrouter.io/models 查看各模型的实时价格。公开目录约有 108 个模型，分为 19 个公开分组。分组结算价方面，GPT 分组每 $1 标准用量为 ¥0.6，Claude 分组为 ¥2.0，市场参考价为 ¥6.8 每 $1。直连价格方面，deepseek-v4-flash 每百万 token 的输入价格为 ¥1.1，输出价格为 ¥4.4（闲时价，工作日北京时间 9:00 至 12:00、14:00 至 18:00 翻倍）。平台费为 0，没有最低消费，也不需要订阅，支付方式为 Stripe 银行卡。失败或报错的请求通常不计费。尽管如此，用户中途断开时仍应及时中止上游请求，以减少已生成内容产生的消耗。

常见问题

以下三个问题涵盖了转发 SSE 流时常见的疑问。

问：可以在 React 中使用 EventSource 直接连接 RelayRouter 吗？
答：不建议这样做。EventSource 无法安全携带密钥，而且直连会暴露 API Key。应让 React 连接自有后端路由，由后端完成鉴权和转发。

问：切换到 Claude 或 Gemini 模型时，需要重写转发代码吗？
答：通常不需要。RelayRouter 同时兼容 OpenAI、Anthropic 与 Gemini 协议，模型范围包括 Claude 系、GPT-6 与 GPT-5.6、gemini-3.8-flash，以及 DeepSeek、GLM、MiniMax、Moonshot。保持现有 SDK，修改模型 id 即可。

问：流式请求出错会被扣费吗？
答：失败或报错的请求通常不计费。具体模型的费率请以 https://relayrouter.io/models 页面显示为准。