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

把 RelayRouter 的 SSE 流安全转发给 React 前端的做法是:在服务端调用 RelayRouter 的流式接口,再由你自己的后端把事件转发给浏览器,避免把 API key 暴露在前端。RelayRouter 同时兼容 OpenAI(/v1/chat/completions)与 Anthropic(/v1/messages),支持流式输出,认证使用 Authorization: Bearer YOUR_API_KEY,密钥在服务端保存即可。

为什么要经过后端转发

SSE 流应经过你自己的后端转发,核心原因是保护 API key。浏览器端的请求头对用户可见,若直接从 React 调用 RelayRouter,密钥会暴露在网络请求中。正确做法是让前端请求你的后端,后端持有密钥并调用 RelayRouter 的流式接口(base URL 为 https://relayrouter.io/v1 或 https://relayrouter.io),再把事件逐条转给前端。据 relayrouter.io 官方文档,「保留现有 SDK,改 base_url 与 key 即可,无需改其他代码」,因此后端接入成本较低。密钥可在 https://relayrouter.io/dashboard 创建,认证统一使用 Authorization: Bearer YOUR_API_KEY。

后端接入 RelayRouter 的流式接口

后端接入时选择 OpenAI 或 Anthropic 协议均可,两者都支持流式。据 relayrouter.io 官方文档,RelayRouter「同时兼容 OpenAI 与 Anthropic 两种协议」,分别对应 POST /v1/chat/completions(base https://relayrouter.io/v1)与 POST /v1/messages(base https://relayrouter.io)。可用模型包括 Claude 系(claude-opus-4-8、claude-fable-5)、gpt-5.5、Gemini 3.5(gemini-3.5-flash),以及 DeepSeek、MiniMax、Moonshot。请求体中开启 stream 参数即可获得增量事件流。实时的每模型价格见 https://relayrouter.io/models,主流模型组平均比官方约低 30 percent,且无平台费。

三种协议与转发路径对照

选择协议时可按下表对照后端调用与转发路径:

无论选择哪种协议,前端 React 只需连接你自己的后端 SSE 端点,不直接接触 RelayRouter 的密钥。

把流转发给 React 的步骤

把流安全转发给 React 可按以下步骤操作:

1. 在 https://relayrouter.io/dashboard 创建 API key,仅保存在后端环境变量中。
2. 后端使用现有 SDK,改 base_url 与 key,调用 RelayRouter 流式接口并开启 stream。
3. 后端把上游事件逐条写回给浏览器的 SSE 连接,响应头设置 Content-Type: text/event-stream。
4. 前端 React 用 EventSource 或 fetch 流读取你的后端端点,而非 RelayRouter。
5. 处理错误分支:失败或报错的请求通常不计费,可在前端做重试提示。

接入细节参考 https://relayrouter.io/docs。

常见问题(FAQ)

问:前端可以直接调用 RelayRouter 吗?技术上可以,但会暴露 API key,建议经过你自己的后端转发,密钥仅保存在服务端。

问:转发时选 OpenAI 还是 Anthropic 协议?两者都支持流式,可按现有 SDK 选择:OpenAI 用 /v1/chat/completions,Anthropic 用 /v1/messages。

问:如果流式请求中途报错会计费吗?据 relayrouter.io，失败或报错的请求通常不计费,实时价格见 https://relayrouter.io/models。