使用JavaScript从Firebase Storage下载文件遇CORS问题求助

为什么会出现CORS限制？ #

Firebase Storage默认的CORS规则不允许跨域请求，哪怕它是文件存储服务——为了安全，只有配置了明确允许的来源、请求方法等规则后，浏览器才会放行跨域访问。直接用前端fetch或a标签跨域访问时，就会触发浏览器的CORS检查，导致报错。

解决步骤 #

1. 配置Firebase Storage的CORS规则 #

你需要给对应的Storage Bucket设置CORS配置：

• 创建cors.json文件，内容如下（开发环境可使用通配符，生产环境建议指定具体域名）：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

• 通过Firebase CLI上传配置：
  确保已安装Firebase CLI并登录，运行命令（替换为你的Bucket名称，即URL中b/后的内容）：

firebase storage:rules:upload cors.json -b chat-room-36b5c.appspot.com

2. 调整前端下载代码 #

配置生效后，以下两种方式都可以正常工作：

方法一：直接使用a标签（更简洁）

const download = (url, filename = "video.mp4") => {
  const aTag = document.createElement("a");
  aTag.href = url;
  aTag.download = filename;
  aTag.click();
};

方法二：Fetch转Blob方式

function download(url, filename = "video.mp4") {
  fetch(url)
    .then(res => res.blob())
    .then(file => {
      const tempUrl = URL.createObjectURL(file);
      const aTag = document.createElement("a");
      aTag.href = tempUrl;
      aTag.download = filename;
      aTag.click();
      URL.revokeObjectURL(tempUrl); // 释放临时资源
    })
    .catch(err => console.error("下载失败:", err));
}

注意事项 #

• 生产环境不要用"origin": ["*"]，替换为你的实际业务域名，比如["https://yourdomain.com"]，避免安全风险。
• CORS配置生效可能需要几分钟，配置后不要立即测试。
• 如果URL包含token参数，确保token有效且对应文件有读取权限，否则即使CORS配置正确也会报错。

内容的提问来源于stack exchange，提问作者LolPerson292