使用Image()加载Firebase Storage图片失败，求解决办法

问题根源 #

你遇到的是**跨域资源共享(CORS)**问题：Firebase Storage默认的CORS规则不允许前端直接从你的域名加载图片并执行Canvas像素操作（getImageData属于敏感操作，会触发浏览器的跨域权限检查），本地文件不受跨域限制所以能正常工作。

解决步骤 #

1. 配置Firebase Storage的CORS规则

需要给Firebase Storage设置允许你的域名访问的CORS策略：

• 本地创建cors.json文件，内容如下（开发阶段用*允许所有域名，上线后替换为你的实际业务域名）：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600,
    "responseHeader": ["Content-Type", "Access-Control-Allow-Origin"]
  }
]

• 通过Firebase CLI上传配置：
  1. 安装Firebase CLI：npm install -g firebase-tools
  2. 登录Firebase账号：firebase login
  3. 切换到你的项目目录（未初始化过项目先执行firebase init并选择Storage）
  4. 上传CORS配置：firebase storage:rules:upload cors.json

2. 修正getAverageRGB函数

当前函数存在跨域设置顺序错误和缺少错误处理的问题，调整后代码如下：

async function getAverageRGB(src) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    context.imageSmoothingEnabled = true;
    
    const img = new Image();
    // 必须先设置跨域属性，再赋值src
    img.crossOrigin = "anonymous";
    img.src = src;
    
    img.onload = () => {
      canvas.width = 1;
      canvas.height = 1;
      context.drawImage(img, 0, 0, 1, 1);
      try {
        const rgbData = context.getImageData(0, 0, 1, 1).data.slice(0, 3);
        resolve(rgbData);
      } catch (err) {
        reject(new Error("读取图片像素失败：" + err.message));
      }
    };
    
    img.onerror = (err) => {
      reject(new Error("图片加载失败：" + err.message));
    };
  });
}

3. 验证配置有效性

配置完成后清除浏览器缓存，重新测试。若仍有问题，检查：

• 用firebase storage:rules:get命令确认CORS配置已正确上传
• 图片URL的token是否有效、路径是否正确
• 浏览器Network面板中，图片请求的Response Headers是否包含Access-Control-Allow-Origin

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