如何在React和JavaScript中从Firebase图片URL获取Blob或File

问题原因 #

你遇到的TypeError: Failed to fetch大概率是**跨域资源共享（CORS）**限制导致的——Firebase Storage默认不允许任意域名跨域请求资源，同时直接通过fetch调用带token的存储URL也可能因认证或跨域策略被浏览器拦截。

解决方案 #

方案1：配置Firebase Storage的CORS规则 #

如果坚持用fetch方式访问，需要给你的Storage桶配置允许当前网站域名的CORS规则：

1. 新建cors.json文件，内容如下（替换为你的网站域名，开发环境可添加本地调试域名）：

[
  {
    "origin": ["https://你的网站域名.com", "http://localhost:3000"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

2. 使用Google Cloud的gsutil工具上传配置：

gsutil cors set cors.json gs://gragripen-mit.appspot.com

配置生效后，再用原fetch代码即可正常获取Blob。

方案2：改用Firebase Storage SDK获取文件（推荐） #

直接使用Firebase官方SDK获取Blob，能自动处理认证、跨域问题，比fetch更可靠且无需拼接复杂URL：

// 确保已完成Firebase初始化
import { getStorage, ref, getBlob } from "firebase/storage";

const storage = getStorage();
// 直接用存储路径创建引用，无需手动拼接URL
const imageRef = ref(storage, 'files/4e8c089a-8e0b-4179-bef8-45fc6096a312_profileImage');

try {
  const blob = await getBlob(imageRef);
  // 后续执行图片大小调整、上传副本的逻辑
} catch (error) {
  console.error('获取图片Blob失败:', error);
}

关于拆分URL的问题 #

拆分URL去掉?alt=media参数后，请求返回的是Firebase Storage的文件元数据JSON，而非图片二进制内容——必须保留?alt=media才能获取图片文件，但这又会触发跨域限制，因此推荐使用SDK方案规避这类问题。

内容的提问来源于stack exchange，提问作者Gunnar Södergren