客户端下载blob文件报未授权访问错误、文件损坏该如何解决？

DevOps 小满

2026-10-4

根因说明

第三方资源接口仅允许白名单内的服务端IP访问，你当前前端代码直接从客户端发起请求，来源IP为客户端公网IP，不在白名单范围内，因此接口返回未授权错误响应而非预期的ZIP二进制流，最终导致下载文件损坏。

修复方案

1. 服务端新增代理转发接口

在你的业务服务端新增专属下载代理接口，接口逻辑如下：

接收前端传递的文件标识参数
由服务端向https://api.example.com的资源地址发起请求，因服务端IP在白名单内，可正常获取ZIP文件流

服务端将获取到的二进制流原样返回给前端，同时配置正确的响应头：

Content-Type: application/zip
Content-Disposition: attachment; filename="自定义文件名.zip"
Access-Control-Allow-Origin: 你的前端域名（存在跨域时配置）

2. 修正前端请求逻辑

修改原前端代码的请求地址，同时修复原代码的语法错误与不合理配置：

// 替换原第三方接口地址为你的服务端代理接口地址
xhttp.open("GET", "/api/proxy-download?file=" + encodeURIComponent(file), true);
// 删除原不合理配置：GET请求无请求体，不需要设置Content-Type请求头
xhttp.responseType = "blob";
xhttp.onload = function (event) {
    // 新增请求状态校验
    if (xhttp.status >= 200 && xhttp.status < 300) {
        const blob = xhttp.response;
        // 补全原代码缺失的if关键字
        if (blob.size > 0) {
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
            // 新增内存释放逻辑，避免内存泄漏
            window.URL.revokeObjectURL(link.href);
        }
    } else {
        console.error('下载失败，错误状态码：', xhttp.status);
    }
};
xhttp.send();