为什么前端说格式不正确

Question

I try to get the file stream from my nodejs(express) backend,and download it using Range in Header. But the frontend says thatresponse is NOT WELL-FORMED, i can receive data from the back,but when i try to download it,its size is bigger than the real

error:

res data ：

Here is what i write in my node:

    console.log("handleDownload ")
    // 获取文件路径
    const fileId = req.query.id;
    let fileInfo, filePath, fileName;
    try {
        fileInfo = await FileList.findById(fileId, "meta", {
            lean: true
        })
        filePath = fileInfo.meta.resURL[0]
        fileName = fileInfo.meta.name
        fileType = fileInfo.meta.lftype
        
    } catch (e) {
        res.sendData("", 202, "数据库查找失败" + e)
        return
    }
    //let filePath = path.join(__dirname,'../uploads/',fileName);
    // 1、 判断文件是否存在
    try {
        fs.accessSync(filePath);
    } catch (error) {
        res.sendData("", 201, "下载的资源不存在" + error);
        return
    }
    try {
        // 获取文件大小
        console.log("range")
        const size = fs.statSync(filePath).size;
        const range = req.range();
        console.log(range)
        console.log("size:" + size)
        if (!range) {
            res.set(Object.assign({'Accept-Ranges': 'bytes'},createFileResHeader(fileName,size,fileType))).status(200).end()
        } else {
            const {
                start,
                end
            } = range[0]
            // 3、检查请求范围
            if (start >= size || end >= size) {
                res.status(416).set('Content-Range',`bytes */${size}`)
            } else {
                // 4、返回206：客户端表明自己只需要目标URL上的部分资源的时候返回的
                res.status(206).set('Content-Range',`bytes ${start}-${end ? end : size - 1}/${size}`)
                //.set('Content-Length',end-start+1)
            }
            //res.send()
            fs.createReadStream(filePath, {start, end}).pipe(res);
        }
    } catch (err) {
        res.send("", 201, err)
        return;
    }
};

And the header i receive is:

HTTP/1.1 206 Partial Content
X-Powered-By: Express
Access-Control-Allow-Origin: *
Content-Range: bytes 0-898656/898657
Date: Mon, 17 Jan 2022 11:58:21 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

And my frontend code:

axios({
            method: 'get',
            url: '/crud/download',
            params: {
                id: fileId,
            },
            headers: {
                Range: `bytes=${start}-${end}`, 
                responseType : "application/octet-stream"
            },
        }).then(res => {
            downloaded += end - start + 1
            if(downloaded < fileSize)  {
                download(fileId,fileName,fileSize,fileType,axios,msg,downloaded)
            }else {
                //console.log(fileType)
                const blob = new Blob([res.data],{type:fileType});
                const href = URL.createObjectURL(blob);
                //console.log(href)
                downloadEvt(href, fileName);
            }
        })
        .catch(e => {
            msg({
                msg: e
            })
        })

if-else part is the core code

I can download the file but its size is bigger than the real,and surely can't open it. I think it's relative to ( Transfer-Encoding: chunked )in response header. I can't resovle this problem,I'll appriciate if you give me some tips

Answer 1

Well,today i solve this problem.i set responseType = "blob" in axios req.i tried to set this before but i put it into req headers instead of as a single like this:

axios({
            method: 'get',
            url: '/crud/download',
            params: {
                id: fileId,
            },
            headers: {
                Range: `bytes=${start}-${end}`,
            },
            responseType : 'blob',
        })