前端fetch手动解析SSE消息体，字符串双引号去除不掉的问题定位

本文共五部分，问题出现场景、定位问题、思考原因、问题解决、总结。定位到JSON规范问题。

1. 问题出现场景

前后端联调sse消息体数据时，发现前端收到的数据，双引号去除不掉。如下图所示：

后端nodejs，消息体写入如下代码所示：

js 复制代码

//后端stream写入
for await (const chunk of stream) {
      // todo finish_reason: chunk.choices[0].finish_reason,??
      if (chunk.choices[0]?.delta?.content) {
        res.write(`data: ${JSON.stringify(chunk.choices[0]?.delta?.content)}\n\n`)
      }
    }

前端vue，fetch接收消息体，手动解析如下代码所示：

js 复制代码

const chunk = decoder.decode(value)
// 手动解析SSE格式
const lines = chunk.split('\n\n')
let data = ''
lines.forEach((line) => {
  if (line.startsWith('data:')) {
    data += line.replace('data:', '').trim()
  }
})
options.onMessage(data)

网络接收数据如下：

2. 定位问题

发现是前端接收数据时，双引号的问题，即使手动正则匹配去除双引号，双引号依然存在，【双引号变为一个引号】。

js 复制代码

data += line.replace('data:', '').replace(/^"|"$/g, '').trim()

即使修改正则表达式，问题依然存在，双引号去不掉。

js 复制代码

data += line.replace('data:', '').replace(/^"(.*)"$/, '$1').trim()

寻找双引号依然存在的原因，将后端的传入代码进行修改，将JSON.stringify修改为String。：

js 复制代码

 res.write(`data: ${String(chunk.choices[0]?.delta?.content)}\n\n`)

发现问题解决。

3. 思考原因

后端传入时，使用JSON.stringify()，前端接收未使用JSON.parse()解析。

为什么 JSON.stringify 会产生双引号？

JSON 规范要求。

JSON 规范要求所有字符串必须用双引号包围，这是 JSON 格式的标准。

js 复制代码

// JSON 标准格式
const jsonString = JSON.stringify("作文");
console.log(jsonString); // 输出: "\"作文\""
// 实际存储: ""作文"" (但显示时会转义)

4. 问题解决

后端依然使用JSON.stringify(), 为了http消息体保持字符串传输。前端使用JSON.parse()进行转译，因为 JSON.parse 已经去掉了外层的双引号。

js 复制代码

 data += JSON.parse(line.replace('data:', ''))

发现问题解决，格式正常显示。

5. 总结

JSON.stringify 遵循 JSON 规范，会给字符串添加双引号
String() 只是简单的类型转换，不会添加额外格式
最佳实践是在服务器端返回结构化数据，避免直接字符串化简单字符串
如果必须处理带双引号的字符串，使用清理方法，即在JSON.parse()传入第二个参数，使用过滤函数进行处理。

等前后端完成完整的sse逻辑，再写一篇完整的代码，发现网上的代码不全，且发送、接收时代码需要注意很多格式问题。