JavaScript接收Go服务端SSE消息时阿拉伯字符显示乱码如何解决

问题原因 #

你遇到的إدارة قطو٠و حلا乱码是典型的编码不匹配问题：UTF-8编码的阿拉伯语文本被浏览器按照Latin-1（ISO-8859-1）字符集解析了。
你的前端HTML、JS文件都已经正确声明了UTF-8编码，问题核心在Go服务端的SSE响应配置：SSE规范默认如果响应头不指定字符集，EventSource会使用Latin-1解析流内容，不会自动继承页面的UTF-8配置。

修复步骤 #

• 优先修改Go服务端SSE接口的响应头
  写SSE接口时，Content-Type必须明确携带charset=utf-8参数，正确的响应头设置代码如下：

  w.Header().Set("Content-Type", "text/event-stream; charset=utf-8")
  w.Header().Set("Cache-Control", "no-cache")
  w.Header().Set("Connection", "keep-alive")
  

  绝大多数SSE阿拉伯语、中文等非ASCII字符乱码，都是漏写了charset=utf-8导致的。
• 排查数据源编码问题
  如果改完响应头仍然乱码，检查你获取PushName字段的上游逻辑：
  • 从数据库读取的话，确认数据库连接配置指定了utf8mb4字符集
  • 从第三方接口拉取的话，确认读取响应时使用UTF-8解码，不要用默认的Latin-1编码读取
• 前端临时兜底方案
  如果暂时无法修改服务端配置，可以在前端拿到消息后手动做编码转换，临时修复乱码：

  var source = new EventSource("http://localhost:1234/sse/signal");
  source.onmessage = function (event) {
      // Latin-1转UTF-8修复乱码
      const decoder = new TextDecoder('utf-8');
      const fixedMsg = decoder.decode(new TextEncoder().encode(event.data));
      document.querySelector('#msg').innerHTML = fixedMsg;
  }
  

  该方案仅作临时调试用，长期使用还是要修正服务端响应头，否则所有接入该SSE接口的客户端都需要单独做转码处理。

内容的提问来源于stack exchange，提问作者Hasan A Yousef