记录一个multipart/x-mixed-replace; boundary=frame相应头的问题

• 需求背景

实现使用img接收流模拟一个实时播放录像的功能，手动控制src属性，碰到一个问题，后端返回的是连续的帧，用img标签接url，我第一次接没问题，时间到了切换成静态url封面，等我第二次接的时候就报错，稳定奇数次数没问题，偶数报错。

• 问题代码

 
//开始读取
const handleStart = debounce(() => {
        if (!isPlaying) {
            setIsPlaying(true);
            setTimeLeft(maxReadTime);
            setImgUrl(`${streamUrl}${streamUrl.includes("?") ? "&" : "?"}max_read_time=${maxReadTime}&_t=${Date.now()}`);
        }
    }, 500); 
//停止
   const stopStream = () => {
        setIsPlaying(false);

        if (imgRef.current) {
            imgRef.current.onerror = null; // 🧹 移除旧监听，避免触发 SyntheticBaseEvent
            imgRef.current.src = ""; // 主动断流
        }

        setTimeout(() => {
            if (isMountedRef.current) {
                setImgUrl(dkePoster);
            }
        }, 100);
//定时器相关
    useEffect(() => {
        if (!isPlaying) return;
        const timer = setInterval(() => {
            setTimeLeft((t) => {
                if (t <= 1) {
                    clearInterval(timer);
                    stopStream();
                    return 0;
                }
                return t - 1;
            });
        }, 1000);
        return () => clearInterval(timer);
    }, [isPlaying]);

• 解决方案

这里的问题出在定时器会提前一秒结束，所以修改判断条件

t <= 1 为 t == 0
但是还是有个疑问待解决，为什么浏览器会报出net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)，这个暂时没有找到相关资料