如何通过a标签实现Firebase Cloud Storage文件点击下载？

• download属性仅对同域资源生效，Firebase存储域名和你的应用域名属于跨域场景，该属性默认失效
• Firebase存储返回的资源默认响应头Content-Disposition值为inline，浏览器会优先触发预览而非下载
• 跨域请求报错是因为Firebase存储默认未配置允许你的应用域名发起跨域请求

步骤1：配置Firebase存储跨域规则 #

首先创建cors.json配置文件，内容示例：

[
  {
    "origin": ["你的应用实际域名，本地开发可填http://localhost:5000"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

使用Google Cloud的gsutil工具执行以下命令生效配置：
gsutil cors set cors.json gs://你的Firebase存储桶名称
存储桶名称可以在Firebase Storage控制台的顶部路径中找到。

步骤2：二选一实现下载逻辑 #

方案A：上传时指定下载头（推荐） #

使用pyrebase4上传文件时，主动指定资源的响应头配置，后续用户点击链接即可直接触发下载，无需额外前端逻辑：

storage = firebase.storage()
# 上传时附加元数据
file_meta = {
    "contentDisposition": "attachment; filename=\"自定义下载文件名.js\""
}
# 按你的原有上传逻辑传入元数据即可
storage.child("存储路径/目标文件名.js").put(上传的文件对象, file_meta)

方案B：前端通过Blob实现下载 #

如果不想修改已上传文件的元数据，可以在已配置CORS的基础上，通过前端JS封装下载逻辑：

async function downloadFirebaseFile(fileUrl, saveFilename) {
  const res = await fetch(fileUrl);
  const fileBlob = await res.blob();
  const tempUrl = URL.createObjectURL(fileBlob);
  const aTag = document.createElement('a');
  aTag.href = tempUrl;
  aTag.download = saveFilename;
  document.body.appendChild(aTag);
  aTag.click();
  // 清理临时资源
  URL.revokeObjectURL(tempUrl);
  document.body.removeChild(aTag);
}

替换原有a标签的逻辑：

<a href="javascript:;" onclick="downloadFirebaseFile('你的Firebase文件链接', 'charchitchat.js')">download</a>

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