如何在Angular 11-15中用TypeScript将Firebase图片URL转为File对象

一、常见失败原因 #

• CORS配置缺失：Firebase Storage默认未配置跨域请求规则，是最常见的失败原因
• 权限规则限制：Storage安全规则可能拦截了未授权的请求
• 链接有效性：确认token未过期、路径编码正确

二、直接请求代码示例 #

1. Fetch实现 #

const imageUrl = 'https://firebasestorage.googleapis.com/v0/b/developpement-fea24.appspot.com/o/partner%2Fune-station%2Flogo%2Fwk62203828-image-kp6bmcbb.jpg?alt=media&token=bffed6f9-5cac-42c8-a7b1-f27e37559493';

fetch(imageUrl, {
  method: 'GET',
  mode: 'cors',
  headers: { 'Accept': 'image/*' }
})
.then(res => {
  if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
  return res.blob();
})
.then(blob => {
  // 将Blob转为可显示的URL并插入页面
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
})
.catch(err => console.error('获取图片失败：', err));

2. XMLHttpRequest实现 #

const imageUrl = 'https://firebasestorage.googleapis.com/v0/b/developpement-fea24.appspot.com/o/partner%2Fune-station%2Flogo%2Fwk62203828-image-kp6bmcbb.jpg?alt=media&token=bffed6f9-5cac-42c8-a7b1-f27e37559493';

const xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob';
xhr.setRequestHeader('Accept', 'image/*');

xhr.onload = function() {
  if (xhr.status === 200) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(xhr.response);
    document.body.appendChild(img);
  } else {
    console.error('请求失败，状态码：', xhr.status);
  }
};

xhr.onerror = function() {
  console.error('网络请求错误');
};

xhr.send();

三、配置Firebase Storage CORS规则 #

如果是跨域问题，需通过以下步骤配置：

1. 创建cors.json文件，内容如下：

[
  {
    "origin": ["*"], // 生产环境建议替换为你的具体域名，如["https://your-site.com"]
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

2. 使用Firebase CLI执行命令上传配置：

gsutil cors set cors.json gs://developpement-fea24.appspot.com

四、检查Storage权限规则 #

确保安全规则允许读取该图片，测试阶段可临时开放（生产环境需严格配置）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true;
      allow write: if false;
    }
  }
}

内容的提问来源于stack exchange，提问作者l3miage-crivoid