为什么请求AI的API请求在Apifox中流式输出但在浏览器中一次性输出？

Question

相同的AI请求，为什么用apifox看是根据时间流式输出的，但是在浏览器上面看请求的EventStream就是在同一个时间输出的


这是前端请求的代码

if ('fetch' in window) {
        // 使用 fetch API   
            response = await fetch('/v1/workflows/run', {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                  "inputs": {
                    "input": "商品怎么配置"
                  },
                  "response_mode": "streaming"
                }),
            })
        }
        const reader = response.body.getReader();
        const decoder = new TextDecoder();

        while (true) {
            const { done, value } = await reader.read();
            console.log('收到chunk:', new Date().getTime()); // 看时间戳是否分散
            if (done) break;

            const chunk = decoder.decode(value, { stream: true });
            console.log("lines==>", chunk)
            const lines = chunk.split("\n").filter(line => line.startsWith("data:"));

            for (const line of lines) {
                const data = line.replace("data: ", "").trim();
                if (data === "[DONE]") return;

                // try {
                //     const json = JSON.parse(data);
                //     const text = json.choices?.[0]?.delta?.content  // OpenAI 格式
                //             ?? json.delta?.text;                   // Anthropic 格式
                //     if (text) process.stdout.write(text);            // 或更新 UI
                // } catch {}
            }
        }

Answer 1

如果你是Vue2开发环境中遇到的，需要在配置中增加一下compress

Answer 2

这个看前端的代码有啥用 要看后端的代码是咋写的

Answer 3

被中间代理（比如 nginx / devServer）缓冲了，导致浏览器一次性收到。
Apifox 是直连后端（或不缓冲）所以是流式浏览器走了你前端链路 → 被代理“攒包” → 一起返回

Answer 4

流式输出是使用了 Server-Sent Events（即 SSE）的解析方式。

你之所以能在 Apifox 看到流式输出，是因为每个 message 都是通过 SSE 接收的。但在浏览器上直接发起 HTTP 请求时，浏览器并没有对该请求进行 Server-Sent Events 的支持，所以你看到的是非流式的完整的 response 的返回体。