Firebase Storage跨域CORS政策错误解决求助

方法一：配置Firebase Storage的CORS规则（彻底解决） #

Firebase Storage默认的跨域规则不允许http://localhost:3000这类源通过fetch请求资源，需要自定义CORS规则：

1. 创建cors.json文件，写入以下配置：

[
  {
    "origin": ["http://localhost:3000"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

• 若需支持生产环境域名，直接在origin数组中添加，比如["http://localhost:3000", "https://your-prod-domain.com"]
• method指定允许的请求方式，这里只需要GET下载文件

2. 通过Firebase CLI上传配置：

• 确保已安装Firebase CLI：npm install -g firebase-tools
• 登录Firebase账号：firebase login
• 初始化Storage（未初始化过的话）：firebase init storage
• 上传CORS规则：firebase storage:rules:upload cors.json

执行完成后刷新页面，CORS错误即可解决。

方法二：修改下载逻辑绕过fetch（快速临时解决） #

你当前的代码通过fetch转blob再触发下载，其实可以直接利用浏览器原生的a标签下载能力，跳过fetch请求，避免触发CORS检查：

修改downloadFileUrl函数如下：

const downloadFileUrl = (url) => {
  const parts = url.split("/");
  const fileName = parts[parts.length - 1].split("?")[0];
  const cleanedFileName = fileName
    .replace(/^[\d]+/, "")
    .replace(/%20/g, " ")
    .trim();
  const aTag = document.createElement("a");
  aTag.href = url;
  aTag.setAttribute("Download", cleanedFileName);
  aTag.target = "_blank";
  document.body.appendChild(aTag);
  aTag.click();
  aTag.remove();
};

这种方法无需配置CORS，适合快速测试场景，但如果你的文件是私有资源（需要权限验证），还是得用方法一配置CORS后再通过fetch带token请求。

内容的提问来源于stack exchange，提问作者Just A Guy