使用S3 URL下载图片异常：图片损坏问题求助

你的代码直接将S3 URL字符串封装成Blob，相当于下载的是URL文本内容，而非图片的二进制数据，这就是图片打开损坏的核心原因。

需要先通过请求获取图片的二进制数据，再生成Blob进行下载，修正后的代码如下：

const downloadImage = async (imageUrl: string) => {
  try {
    // 发起请求获取图片二进制数据
    const response = await fetch(imageUrl);
    if (!response.ok) throw new Error('图片请求失败');
    
    // 将响应转为Blob，保留原图片的MIME类型
    const blob = await response.blob();
    
    // 创建下载链接
    const a = document.createElement('a');
    const objectUrl = URL.createObjectURL(blob);
    
    a.href = objectUrl;
    // 可从URL提取原文件名，也可自定义
    a.download = imageUrl.split('/').pop() || 'image.png';
    
    document.body.appendChild(a);
    a.click();
    
    // 释放object URL，避免内存泄漏
    URL.revokeObjectURL(objectUrl);
    document.body.removeChild(a);
  } catch (error) {
    console.error('下载失败:', error);
  }
};

• CORS配置：如果前端域名和S3桶域名不同，需在S3控制台配置CORS规则，允许你的域名发起GET请求。示例规则：

  <CORSConfiguration>
    <CORSRule>
      <AllowedOrigin>https://你的前端域名.com</AllowedOrigin>
      <AllowedMethod>GET</AllowedMethod>
      <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>
  

• URL权限：确保S3 URL有效且具备读取权限（公开可读或带签名的临时URL）。

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