Lume项目调用Firebase Storage的getDownloadURL报XMLHttpRequest未定义

问题根源 #

Firebase客户端SDK的getDownloadURL依赖浏览器环境的XMLHttpRequest API，但Lume的_data脚本运行在Deno环境中，该环境没有这个API，因此触发报错。

方案一：直接构造公开文件的下载URL（仅适用于公开权限图片） #

如果你的Storage文件设置了公开访问权限，无需调用SDK，直接拼接固定格式的URL即可：

const bucketName = "你的存储桶名称（如xxx.appspot.com）";
const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${bucketName}/o/${encodeURIComponent(`images/${id}`)}?alt=media`;

替换bucketName和id为实际值，即可得到可直接访问的图片URL。

方案二：使用Firebase Admin SDK生成私有文件的签名URL（适用于私有/需权限验证的图片） #

Lume基于Deno运行，可通过兼容Deno的Firebase Admin SDK生成签名URL，完全避开浏览器API依赖：

1. 准备服务账号密钥
   从Firebase控制台下载服务账号JSON密钥文件，放置在项目根目录（注意不要提交到版本库）。

2. 初始化Admin SDK
   在_data文件中导入并初始化Admin：

   import admin from "https://esm.sh/firebase-admin";
   
   // 读取服务账号密钥
   const serviceAccount = JSON.parse(await Deno.readTextFile("./service-account-key.json"));
   
   // 避免重复初始化应用
   if (!admin.apps.length) {
     admin.initializeApp({
       credential: admin.credential.cert(serviceAccount),
       storageBucket: "你的存储桶名称.appspot.com"
     });
   }
   

3. 生成签名URL
   遍历Firestore返回的数组，为每个图片ID生成签名URL：

   const bucket = admin.storage().bucket();
   
   // 假设Firestore返回的数据数组为dataArray
   const dataWithUrls = await Promise.all(dataArray.map(async (item) => {
     const imageUrls = await Promise.all(item.imageURLs.map(async (img) => {
       const file = bucket.file(`images/${img.id}`);
       const [signedUrl] = await file.getSignedUrl({
         action: "read",
         expires: "03-01-2500" // 自定义URL过期时间，按需调整
       });
       return { ...img, url: signedUrl };
     }));
     return { ...item, imageURLs: imageUrls };
   }));
   

4. 配置Deno权限
   运行Lume时需要赋予Deno读取文件和网络请求的权限，启动命令需添加：

   lume build -- --allow-read --allow-net
   

内容的提问来源于stack exchange，提问作者Daniël Lizarazo Fuentes