Firebase Storage文件下载出现404 Bad Request问题求助

算力阿峰

2026-6-28

解决Firebase Storage文件下载404错误的方案

问题核心

直接用<a>标签调用Firebase返回的下载URL触发下载时，会出现404错误，但相同URL能在img标签正常加载——说明文件权限、URL本身有效，问题出在浏览器触发下载的请求逻辑与图片加载逻辑的差异上。

可行解决方案：通过Fetch获取Blob后再下载

修改downloadFile函数，先通过fetch拉取文件Blob，再基于Blob创建下载链接，绕开直接使用Firebase URL的兼容性问题：

const downloadFile = async (url, filename) => {
  try {
    // 获取文件Blob资源
    const response = await fetch(url);
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    const blob = await response.blob();
    
    // 创建临时Blob URL
    const blobUrl = URL.createObjectURL(blob);
    
    // 生成下载链接并触发下载
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = filename;
    link.click();
    
    // 清理临时资源
    URL.revokeObjectURL(blobUrl);
    link.remove();
  } catch (error) {
    console.error('下载失败:', error);
  }
};