使用TextDecoder读取POST请求的Server Sent Events失败

问题场景 #

请求text/event-stream类型的SSE端点时，GET请求能通过TextDecoder正常读取流数据，但POST请求下负责处理流的processStream函数完全没有执行迹象，且未使用EventSource API。

相关代码 #

POST请求代码 #

const response = await fetch('/event', {
    method: 'POST',
    credentials: 'include',
    headers: {
        'Content-Type': 'application/json',
    },
});

SSE流读取代码 #

const reader = response.body?.getReader();
const decoder = new TextDecoder();

if (!reader) {
    throw new Error('Failed to get response reader');
}

// Process the stream
const processStream = async () => {
    try {
        while (true) {
            const { value, done } = await reader.read();

            if (done) {
                log('Stream complete');
                break;
            }

            const text = decoder.decode(value, { stream: true });
            const lines = text.split('\n');

            for (const line of lines) {
                if (line.startsWith('data: ')) {
                    const data = line.slice(6); // Remove 'data: ' prefix
                    try {
                        if (data.trim()) {
                            const parsedData = JSON.parse(data);
                            log(`Parsed SSE data: ${JSON.stringify(parsedData)}`);
                        }
                    } catch(error) {
                        log(`Error parsing SSE data: ${error}`);
                    }
                }
            }
        }
    } catch(error) {
        log(`Stream processing error: ${error}`);
    } finally {
        reader.releaseLock();
    }
};

processStream().catch((error) => {
    log(`Stream processing failed: ${error}`);
});

可能原因及解决方案 #

1. 请求头冗余或不匹配 #

如果POST请求没有携带JSON请求体，设置Content-Type: application/json属于冗余配置，部分服务器会因此拒绝处理SSE响应，或返回非流式结果。

解决方法：移除不必要的请求头（若没有请求体）：

const response = await fetch('/event', {
    method: 'POST',
    credentials: 'include',
    // 移除Content-Type配置
});

2. Fetch默认行为导致流延迟 #

Fetch对POST请求可能存在缓存或连接复用的默认行为，导致流式响应无法被及时处理。

解决方法：添加缓存和连接相关配置，强制流式处理：

const response = await fetch('/event', {
    method: 'POST',
    credentials: 'include',
    headers: {
        'Content-Type': 'application/json',
    },
    cache: 'no-store', // 禁止缓存响应
    keepalive: true,   // 保持连接活跃
});

3. 服务器端未适配POST请求的SSE响应 #

多数SSE实现默认仅支持GET方法，服务器可能未配置POST请求的分块传输，或未返回SSE必需的响应头。

解决方法：检查服务器返回的响应头，确保包含以下字段：

• Content-Type: text/event-stream
• Transfer-Encoding: chunked
• Cache-Control: no-cache
• Connection: keep-alive

同时确认服务器端允许POST请求访问该SSE端点，且正确处理POST请求的流式输出逻辑。

4. 先确认响应状态是否正常 #

在处理流之前先打印响应状态和头，排查是否是服务器返回了错误状态码：

const response = await fetch('/event', {
    method: 'POST',
    credentials: 'include',
    headers: {
        'Content-Type': 'application/json',
    },
});
console.log('响应状态:', response.status);
console.log('响应头:', Object.fromEntries(response.headers.entries()));

// 后续流处理代码...

如果状态码非2xx，优先排查服务器端的POST请求处理逻辑。

内容的提问来源于stack exchange，提问作者v.y.