Vue3+Node.js+Nginx环境下SSE无法流式传输问题求助

问题情况 #

我基于Vue3和Node.js搭建了SSE示例，Node.js服务器部署在Nginx反向代理之后。实际运行时：

• EventSource立即触发open事件
• 不会流式接收数据，而是一次性获取全部消息
• 接收完所有数据后触发error事件

用curl -H Accept:text/event-stream https://app.kuangcc.com/sse/events测试，流式传输功能正常，说明服务器和Nginx配置无问题。后续在本地环境去掉Nginx直接运行Node.js服务器和Vue前端，问题仍然存在，确定问题出在Node.js服务器与Vue客户端之间，恳请帮忙排查并提供解决方案。

代码实现 #

Vue3 客户端代码 #

eventSource = new EventSource('https://app.kuangcc.com/sse/events');
eventSource.onmessage = function(event) {
   console.log('event.value ',event.data);     // received all the data at once
};
eventSource.onopen = function(event) {      
 console.log("EventSource connection opened");  // fired immediately 
};
eventSource.onerror = (error) => {
     console.error('SSE error:', error);      // received an error after all data received
     eventSource.close();
}

Node.js 服务器代码 #

app.get("/sse/events", (req, res) => {
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Connection", "keep-alive");
  res.setHeader("X-Accel-Buffering", "no");    
  res.flushHeaders();

  res.write( 
    'event: message' + '\n' +
    'data:' + 'message2' + '\n' +
    'retry:' + '2000' + '\n' +
    'id:' + '12345' + '\n\n'
  )

  let counter = 0;
  let interval = setInterval(() => {
    counter++;
    if (counter > 10) {
      clearInterval(interval);
      res.end();
    }
    res.write(`id: interval${counter} \n`);
    //res.write(`event: message \n`);
    res.write(`data: ${JSON.stringify({ num: counter })}\n\n`);
  }, 1000);

  res.on("close", () => {
    clearInterval(interval);
    res.end();
  });
});

Nginx 反向代理配置 #

location /sse {
   proxy_pass http://localhost:3000;
   tcp_nodelay on;
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
   proxy_set_header Connection '';
   proxy_http_version 1.1;
   chunked_transfer_encoding off;
   proxy_buffering off;
   proxy_cache off;
   proxy_read_timeout 86400;
   proxy_send_timeout 500;
   keepalive_timeout  500;

   # Other necessary SSE headers
   proxy_set_header Cache-Control 'no-cache';
   proxy_set_header Connection 'keep-alive';

  # proxy_set_header Upgrade $http_upgrade;
  # proxy_set_header Connection "Upgrade";
}

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