使用React Query下载Blob时createObjectURL调用报错问题

开发者阿泽

2026-8-27

问题产生原因

核心错误是axios配置写法有误：

responseType: 'blob'是axios请求配置的一级属性，你当前代码把它错误写在了headers对象内部，axios无法识别该配置，会默认按文本/JSON格式解析响应内容，返回的结果不是浏览器原生Blob实例。
控制台打印看起来结构和Blob类似，本质是普通JS对象，不满足createObjectURL的参数类型要求，因此触发重载失败的报错。
额外的隐性问题：React Query的查询key写了固定字符串document-download，如果后续传入不同的文件下载地址，会命中同一份缓存，导致下载错文件。

修复方案

调整useDocuments里的axios配置，把responseType挪到配置根层级，同时修正查询key：

return useQuery<Blob, Error>(['document-download', apiUrl], async () => {
    const { data } = await axios.get<Blob>(apiUrl, {
      headers: {
        Authorization: currentUser,
      },
      // 注意：responseType 是axios的一级配置项，不要放在headers内
      responseType: 'blob',
    });
    return data;
  });

修复后可以通过console.log(data instanceof Blob)验证，返回true即代表拿到了正确的Blob实例，此时调用window.URL.createObjectURL(data)即可正常生成下载链接。