浏览器为何仅接收完全部流数据后才处理？是否会中止服务端流式传输？

• 浏览器不会主动中止合法的服务端流式传输：只要请求连接正常、未触发超时规则、前端未主动终止请求、没有跨域/安全策略拦截，会持续保持连接接收服务端发送的分块数据。
• 浏览器接收完全部数据才处理并非默认行为，是配置缺失导致的问题，可按照以下步骤排查修复。

gRPC Gateway响应头配置 #

必须在服务端显式配置以下响应头，否则浏览器会将流式响应当做普通一次性HTTP请求处理：

• 新增Transfer-Encoding: chunked，告知浏览器当前为分块传输的流式响应
• 移除Content-Length头：只要响应携带该头，浏览器会等待接收完对应字节数的全部内容后才会返回响应
• 新增Cache-Control: no-cache，禁用浏览器响应缓存，避免浏览器使用缓存的完整包返回
• 若使用SSE流式协议，需新增Content-Type: text/event-stream，其他流式场景可配置对应业务的Content-Type，避免浏览器强制做统一格式解析

Python服务yield配置注意 #

需确保Python服务的yield输出没有被上层框架缓冲，部分Python Web框架默认会攒够一定大小的响应块才会发送，需要显式关闭框架层的响应缓冲。

如果你的服务端前面部署了Nginx、CDN等反向代理服务，默认会开启响应缓冲，攒够一定大小的内容才会转发给客户端，需要关闭对应代理的缓冲规则：
以Nginx为例，需要在对应路由的配置中新增：

proxy_buffering off;
proxy_cache off;

Angular默认的HttpClient会等待完整响应接收完成后才返回结果，要实现逐块接收流式数据，需要调整请求参数：

• 将请求的responseType设为text或arraybuffer，不要使用默认的JSON解析格式，JSON解析必须依赖完整数据才能执行
• 开启observe: events配置，监听HttpEventType.DownloadProgress事件逐块读取内容，不要等待只有全量数据接收完成才触发的HttpEventType.Response事件

示例代码：

import { HttpClient, HttpEventType } from '@angular/common/http';

constructor(private http: HttpClient) {}

requestStreamData() {
  this.http.get('/your/stream/api/path', {
    observe: 'events',
    responseType: 'text',
    // POST请求在此处添加body参数
  }).subscribe(event => {
    if (event.type === HttpEventType.DownloadProgress) {
      // 接收并处理当前分块数据
      const chunkData = event.partialText;
      console.log('收到分块内容：', chunkData);
    } else if (event.type === HttpEventType.Response) {
      // 全量数据接收完成
      console.log('流式传输结束，完整数据：', event.body);
    }
  })
}

普通REST Client默认不支持流式响应预览，会等待全量数据接收完成后才展示结果，不属于服务端问题。可使用curl工具验证流式传输是否正常：
curl -N https://your-service-endpoint
参数-N用于关闭curl的本地缓冲，实现收到分块立即输出的效果。

• 跨域场景下需要将自定义响应头添加到Access-Control-Expose-Headers配置中，否则前端无法读取对应响应头
• 不要在响应头中添加Content-Encoding: gzip等压缩配置，压缩格式需要浏览器接收完完整压缩包才能解压读取，无法实现逐块处理
• 确保gRPC Gateway配置了服务端流式调用的映射规则，不要使用普通一元调用的映射配置

内容的提问来源于stack exchange，提问作者user2900572