Angular组件无法通过SSE接收后端流式数据问题排查

核心问题分析 #

直接访问API能看到数据但Angular无响应，本质是Flask输出的SSE格式不符合规范，同时Flask默认的响应缓冲会阻止数据实时推送，导致Angular的EventSource无法识别有效消息。

步骤1：修正Flask后端的SSE输出格式与响应配置 #

SSE有严格的格式要求：每个消息必须以data: 开头，内容后需用两个换行符\n\n结尾，同时要关闭响应缓冲并设置正确的HTTP头。修改后的代码如下：

from flask import Response
import time

@bp.route('/stream')
def stream_text():
    def generate_text():
        # 设置SSE必需的响应头，禁用缓存并保持连接
        yield 'Cache-Control: no-cache\n'
        yield 'Connection: keep-alive\n\n'
        
        sections = ['Section 1', 'Section 2', 'Section 3', 'Section 4']
        for section in sections:
            # 严格按照SSE规范构造消息
            yield f'data: {section}\n\n'
            time.sleep(0.5)

    # direct_passthrough=True 关闭Flask的响应缓冲，确保数据实时推送
    return Response(generate_text(), mimetype='text/event-stream', direct_passthrough=True)

步骤2：完善Angular前端的EventSource监听 #

添加连接状态和错误监听，排查连接问题并确保消息被正确接收：

// 初始化EventSource
const eventSource = new EventSource('/api/chat/stream');

// 监听消息接收
eventSource.onmessage = (ev: MessageEvent) => {
   console.log('收到流式数据:', ev.data);
};

// 监听连接成功事件
eventSource.onopen = () => {
    console.log('SSE连接已建立');
};

// 监听错误事件，排查连接或解析问题
eventSource.onerror = (error) => {
    console.error('SSE连接错误:', error);
    eventSource.close();
};

额外排查点：Angular代理配置（若使用开发服务器） #

如果Angular开发服务器和Flask后端端口不同，需确保代理配置正确。创建proxy.conf.json：

{
  "/api/*": {
    "target": "http://localhost:5000", // 替换为你的Flask服务地址
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

启动Angular时指定代理配置：

ng serve --proxy-config proxy.conf.json

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