根本原因是服务端未在content-type响应头中声明charset=utf-8,导致浏览器按iso-8859-1解析utf-8编码的中文;node.js需显式设置text/event-stream; charset=utf-8,php须避免bom和输出缓冲干扰,nginx需强制补全charset。

为什么 HTML5 SSE 响应出现中文乱码
根本原因是服务端发送的响应头未声明 Content-Type 的字符集,浏览器按 ISO-8859-1 解析流式文本,导致 UTF-8 编码的中文被错误解码。
常见现象:前端 EventSource 收到的 data 字段里中文变成 或一堆问号;用 curl 直接请求接口能看到原始字节是正常的(xx xx e4 b8 ad e6 96 87),但浏览器渲染就错。
- 服务端默认不设
Content-Type时,HTTP/1.1 规范允许浏览器自主推测——SSE 场景下几乎总猜错 - 即使后端返回了
Content-Type: text/event-stream,缺了; charset=utf-8仍等同于没设 - 前端加
responseType = 'text'或用fetch手动解析无效:SSE 协议本身要求浏览器以流式文本方式处理,不由 JS 控制编码
Node.js(Express)设置 SSE 字符集的正确写法
必须在 res.writeHead 或 res.setHeader 中显式带上 charset=utf-8,且不能依赖模板引擎或中间件自动注入。
错误示范:res.set('Content-Type', 'text/event-stream') —— 缺少 charset;res.type('text/event-stream')(Koa/Express)—— 多数版本默认不加 charset。
立即学习“前端免费学习笔记(深入)”;
- 推荐写法:
res.writeHead(200, { 'Content-Type': 'text/event-stream; charset=utf-8', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }) - 若用
res.setHeader,务必写全:res.setHeader('Content-Type', 'text/event-stream; charset=utf-8') - 注意换行符必须为
\n(不是\r\n),否则部分浏览器会截断事件;每条消息末尾需空行(\n\n)
PHP 输出 SSE 时绕不开的 header 陷阱
PHP 的 header() 函数对空格和顺序敏感,charset 写错位置或被缓存干扰就会失效。
典型错误:先输出了任何内容(哪怕一个空格、BOM 头、echo '')再调用 header() → 导致 header 被忽略,浏览器收不到 charset 声明。
- 必须放在脚本最开头,且确认文件无 BOM:
header('Content-Type: text/event-stream; charset=utf-8'); - 禁用输出缓冲:
if (ob_get_level()) ob_end_clean();和ob_implicit_flush(true); - 每次发送事件后调用
flush();和ob_flush();,否则中文可能卡在 PHP 缓冲区里出不来
Nginx 反向代理下 SSE 字符集被覆盖怎么办
Nginx 默认会重写 Content-Type 响应头,尤其当后端漏设 charset 时,它可能补上一个不含 charset 的版本,或者直接删掉整个头。
表现是:直连后端服务正常,走 Nginx 就乱码;用 curl -I 查看响应头,发现 Content-Type 变成了 text/event-stream(无 charset)。
- 在 location 块中强制保留并补全:
add_header Content-Type "text/event-stream; charset=utf-8" always; - 禁用 Nginx 对该路径的类型自动推断:
underscores_in_headers on;(防某些框架用下划线传 header)、proxy_pass_request_headers on; - 更稳妥的做法:后端自己发全,Nginx 不干预;把
add_header改成more_set_headers "Content-Type: text/event-stream; charset=utf-8";(需安装 headers-more 模块)
字符集问题看着小,但 SSE 是长连接流式传输,一旦初始响应头定错,整个连接后续所有中文都不可逆地乱码——没有“中途切换编码”机制。最容易被忽略的是代理层和输出缓冲,而不是代码里那行 header() 或 setHeader()。











