必须在Dify工作流发布配置中选择【stream】响应模式，否则API退化为同步响应；Python代理需用StreamingResponse转发并禁用Gzip；前端用EventSource监听message事件解析JSON数据，error时限频重连；Nginx须关闭proxy_buffering以防首token延迟。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在Dify工作流中实现稳定、低延迟的数据流式输出，并让前端能完整接收、逐段渲染每一块响应内容，必须同时处理后端API调用方式、SSE连接管理、前端事件解析和错误恢复逻辑——任何一个环节配置不当，都会导致数据截断、连接中断或首字延迟过高。
确认工作流已启用流式响应模式
登录Dify控制台 → 进入目标工作流编辑页 → 点击右上角「发布」按钮 → 在弹出的发布配置面板中，找到「响应模式」下拉项 → 选择 【stream】 而非 block 或 async。这一步不可跳过，否则后续所有前端流式接收逻辑都将失效，接口会退化为普通同步响应。
发布成功后，页面顶部会显示绿色提示“已发布”，此时工作流API才真正支持SSE流式推送。若仍按旧链接调用，即使前端代码写对了，也收不到任何data:消息。
Python后端代理层必须显式设置超时与流式转发
直接从前端调用Dify API存在跨域与密钥暴露风险，推荐用轻量Python服务（如FastAPI）做代理。关键不是转发请求，而是确保流不被中间层缓冲或提前关闭。
方法一：使用StreamingResponse + requests流式读取
在FastAPI路由中，发起requests.post时必须传入stream=True；收到response后，用StreamingResponse包装其iter_lines()生成器，并手动设置headers：{'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive'}。缺任一header都可能导致浏览器EventSource自动断连。
方法二：禁用uvicorn默认Gzip中间件
【GzipMiddleware会缓存整个响应体再发送，彻底破坏流式特性】。在uvicorn启动命令中添加--no-gzip，或在FastAPI实例初始化时移除所有gzip相关中间件。实测未关闭时，首字延迟从300ms飙升至4.2秒。
前端Vue3中用EventSource接收并拼接SSE数据
第一步：创建EventSource实例，URL携带必要参数
const url = `${import.meta.env.VITE_DIFY_API_BASE}/v1/workflows/run?user=${userId}`;
第二步：监听message事件，过滤空行与[DONE]标识
source.onmessage = (e) => { if (!e.data.trim() || e.data === '[DONE]') return; try { const chunk = JSON.parse(e.data); // Dify流式响应的data字段是合法JSON字符串 this.currentText += chunk.answer || chunk.text || ''; } catch (err) { console.warn('SSE data parse failed:', e.data); } };
第三步：注册error回调，主动重连但限制频次
source.onerror = () => { if (this.reconnectCount { this.initEventSource(); this.reconnectCount++; }, 1000 * this.reconnectCount); } else { this.errorMessage = '连接失败，请刷新重试'; } };
规避Nginx反向代理导致的流式中断
若ECS服务器前端挂了Nginx，必须修改其配置文件，在location块内追加三行：
proxy_buffering off;
proxy_cache off;
proxy_http_version 1.1;
其中【proxy_buffering off】是硬性要求，否则Nginx会攒够64KB才推给前端，大模型输出的首token永远卡住。改完执行nginx -s reload生效，无需重启进程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
