eventsource 连接失败主因是服务端未按sse协议响应：需返回content-type: text/event-stream、禁用缓存、响应体每行以data:/event:/id:/retry:开头并以\n\n分隔；chrome不支持file://协议；需显式close()防内存泄漏；跨域时仅支持withcredentials:true且不能自定义请求头。
EventSource 连接失败的常见原因和检查点
浏览器控制台报 Failed to load resource: net::ERR_CONNECTION_REFUSED 或 EventSource's response has a MIME type ("text/html") that is not "text/event-stream"，基本说明连接没建立成功。关键不是代码写得对不对，而是服务端是否真正按 SSE 协议响应。
- 服务端响应头必须包含
Content-Type: text/event-stream，且不能有缓存（加Cache-Control: no-cache） - 响应体必须是纯文本流，每行以
data:、event:、id:或retry:开头，结尾用双换行（\n\n）分隔消息 - Node.js/Express 中别直接
res.send()，要用res.write()保持连接，并禁用res.end()直到客户端断开 - Chrome 不支持本地文件协议（
file://）下的 EventSource，必须走 HTTP(S) 服务
如何正确初始化并监听 EventSource 的三种事件
EventSource 默认只监听 message 类型事件，但服务端可通过 event: xxx 发送自定义类型，前端用 addEventListener 捕获——这点常被忽略，导致“收不到消息”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
onopen：连接建立后触发，不是每次收到消息都调用，仅一次。适合放连接成功提示 -
onmessage：收到无event:前缀的消息时触发，event.data是字符串内容 -
addEventListener('xxx', handler)：对应服务端event: xxx，例如服务端发event: user_update\ndata: {"id":123}\n\n，前端用source.addEventListener('user_update', ...)接收 - 不要在
onerror里直接new EventSource()重连——浏览器会自动重试，手动重连可能造成连接堆积
关闭 EventSource 与避免内存泄漏的关键操作
页面跳转或组件卸载时没调用 close()，会导致连接持续存在、服务端资源不释放，甚至触发浏览器并发连接数限制（通常 6 个同源连接）。
- 必须显式调用
source.close()，且建议在beforeunload或 React 的useEffect cleanup中执行 - 不要反复
new EventSource(url)而不保存引用——旧实例不会自动销毁，close()必须作用于原实例 - 如果服务端发送了
id:字段，浏览器会在重连时带上Last-Event-ID请求头，服务端可据此续传；但若前端未设id，重连就从头开始，注意业务是否允许丢消息
跨域场景下 EventSource 的限制与替代方案
EventSource 不支持自定义请求头（如 Authorization），也无法设置 withCredentials: true 以外的凭据行为——这意味着带 token 的跨域 SSE 几乎不可行。
- 唯一支持的凭据配置是构造时传
{ withCredentials: true }，此时服务端必须返回Access-Control-Allow-Origin: https://xxx（不能是*），且Access-Control-Allow-Credentials: true - 若需携带 Bearer Token，只能改用
fetch()+ReadableStream手动解析 SSE 流（Chrome 109+ 支持，但 Safari 仍不支持response.body流式读取） - 生产环境高可靠场景，更常见的是降级为 WebSocket，它支持任意 header 和二进制数据，只是协议复杂度略高
retry: 的实际处理逻辑，容易在调试时被当成前端问题——其实多数时候是服务端输出不符合规范，比如少了一个换行、多了一个空格、或者用了 console.log 往响应里写了不该写的内容。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
