【前端】【vue】【下载】vue中下载zip一直在加载中

问题

当把接口复制到浏览器中，就可以直接下载，但是使用代码调用接口就一直显示pending

代码如下

注：因为接口需要有登录校验，所以使用的axios

async function handleBatchDownloadQr(type, row) {
  // const postIds = row.id || ids.value;
  const postIds = type == 'single' ? row.id : ids.value
  ElMessageBox.confirm("确认生成二维码？", "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      ElMessage.info("正在生成，请稍候...");
      try {
        const res = await downloadAgreementQrCode({ agreementIds: postIds.toString() });
        // 1. 根据图片格式指定 Blob 类型，示例为 png（可改为 jpeg/gif 等）
        const blob = new Blob([res.data], { type: 'application/zip' });
        const link = document.createElement('a');
        // 2. 创建 Blob 链接
        link.href = window.URL.createObjectURL(blob);
        // 3. 设置下载文件名和正确的图片扩展名
        link.download = '协议二维码.zip';
        // 4. 触发下载
        link.click();
        // 5. 释放 Blob URL 资源（优化性能）
        window.URL.revokeObjectURL(link.href);
      } catch (e) {
        ElMessage.error('生成失败');
        console.error('下载图片失败：', e);
      }
    })
    .catch(() => {});
}

export function downloadAgreementQrCode(query) {
    return request({
        url: '/sales/agreement/batchAgreementQrCodeDownload',
        method: 'get',
        params: query,
        responseType: 'blob' // 👈 导出文件必须加上
    })
}

解决思路

1.最初我考虑是接口有问题，因为一直超时，但我把接口复制到浏览器中，下载成功
2.考虑前端传参和响应处理有问题

• 后端打断点，确定接收到了参数–前端传参没有问题
• 打印返回响应的值，感觉没什么问题，打印接口如下：

<200 OK OK,file [C:\Users\admin\AppData\Local\Temp\agreement-qrcode-files-12857367521445551119.zip],[Content-Disposition:“attachment; filename=“agreement-qrcode-files.zip””, Content-Type:“application/octet-stream”, Content-Length:“11884”

• 在响应拦截器中打印res，一直加载中，没有数据返回
• 很奇怪，后端已返回数据，前端却接收不到响应！在postman中调用了该接口，可正常返回结果
  根据豆包，有以下几种原因：
  1.Postman 是服务端请求工具，不受浏览器的跨域策略限制；而前端运行在浏览器中，若后端跨域配置不完整，浏览器会拦截响应（即使后端已返回数据），导致前端代码无法接收。
  2.前端的拦截器（axios配置）
  3.请求超时时间过短
  4.浏览器插件/代理干扰 【未遇到过】
  5.网络的特殊限制（公司内网防火墙，CDN/网关缓存）【未遇到过】

快速排查流程（5 分钟定位问题）

1.看浏览器 Console：是否有跨域报错？有则优先修复跨域配置；
2.看 Network 面板：
请求 Status 是否为 200？Response 是否显示[Blob]？是则说明数据已返回，问题在前端解析；
OPTIONS 请求是否失败？是则跨域配置缺失；
3.简化前端请求：去掉拦截器，用原生fetch测试，排除 Axios 配置问题：
javascript
运行

// 原生fetch测试
const token = localStorage.getItem('token');
fetch('/api/download', {
  method: 'GET',
  headers: { 'Authorization': `Bearer ${token}` }
})
.then(res => res.blob())
.then(blob => {
  console.log('fetch接收到Blob：', blob.size);
})
.catch(err => console.error('fetch错误：', err));

4.测试无 Token 请求：若前端去掉 Token 后能接收响应，说明跨域配置未允许Authorization头。