后端利用sse技术发给我前端事件流，发了很多次，我只接收到一次，并且数据被合并，这是为什么？

Question

最近在做聊天打字机效果，也就是希望字是一个一个被收到并展示的，而不是一次性返回给我展示，所以用到了sse。
现在的情况是似乎定位到是代理的问题，但是不确定具体是什么原因。

1.我的主项目A用的是webpack5自己从头配置的，本地调试只能接收到一个事件，数据被合并
2.我用vue-cli3搭了个demo做测试，接口是正常的，能接收到多个事件。vue-cli3是webpack4对吧？
3.我把项目放到线上，线上用的是nginx做的反向代理，接口同样正常。

所以现在只有我A本地调试的时候不正常，到底是为什么呢。

图1，A项目代理

图2，vue-cli3代理

代理没做什么复杂的配置，看不出什么区别
请求接口用的是fetch

  new promise(resolve=>{    
  fetch(`url`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(params),
  }).then(res => {
    const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
    resolve(reader);
  });})

拿到reader之后处理逻辑：

    while (true) {
    let { value, done } = await reader.read();
    console.log(value);
    if (done) {
      break;
    }}

Answer 1

以前遇到过一个 SSE 的问题是 gzip 导致的，不确定你这里是否是同样的问题。你可以先试试在 webpack-dev-server 配置里把 gzip 关掉看看。

https://webpack.js.org/configuration/dev-server/#devservercom...

Answer 2

看看是不是 nginx 之类的服务器缓存了。

Answer 3

卧槽,牛逼,我今天也碰到这个问题写死fetch后端地址能流式,用代理就不行,问gpt,gpt也回答不上来,试了试gzip禁用,确实可以,这个具体是啥原理.