使用JavaScript的fetch下载文件时文件始终损坏的问题求助

核心问题：mode: 'no-cors'导致无效Blob #

你的代码中fetch设置了mode: 'no-cors'，这会让浏览器返回一个不透明Blob（opaque blob）——这种Blob无法获取到真实的文件内容，只是一个没有有效数据的空容器。因为no-cors模式下，浏览器会严格限制对响应内容的访问权限，即使请求成功，也无法读取文件的实际字节数据，最终下载的自然是损坏的文件。

其他次要问题 #

• target="_blank"是多余的，它会触发新标签页打开，但下载操作不需要新开标签，反而可能干扰下载流程，应该移除。
• URL.revokeObjectURL的调用时机过早，可能在浏览器还没完成文件下载时就回收了Blob URL，导致下载中断或文件损坏，可以延迟一点再执行。

修复后的代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>

        <script>
            function downloadFile(url, fileName) {
                fetch(url, { 
                    method: 'get', 
                    // 移除mode: 'no-cors'，使用默认的cors模式
                    referrerPolicy: 'no-referrer' 
                })
                .then(res => {
                    // 先检查请求是否成功
                    if (!res.ok) throw new Error('请求失败');
                    return res.blob();
                })
                .then(res => {
                    const aElement = document.createElement('a');
                    aElement.setAttribute('download', fileName);
                    const href = URL.createObjectURL(res);
                    aElement.href = href;
                    // 移除target="_blank"
                    aElement.click();
                    // 延迟回收URL，确保下载完成
                    setTimeout(() => URL.revokeObjectURL(href), 1000);
                })
                .catch(err => console.error('下载出错:', err));
            };
        </script>
    </head>
    <body>
    <script>
        window.onload = function() {
            downloadFile('./tes.pdf', 'tes.pdf');
        };
    </script>
    </body>
</html>

额外说明 #

如果你的文件是跨域资源，不能直接移除no-cors，此时需要目标服务器配置CORS允许你的域名访问，否则浏览器会阻止跨域请求获取有效数据。如果是同域文件，直接移除no-cors即可正常下载。

内容的提问来源于stack exchange，提问作者Diky Wahyudi