S3预签名URL下载图片失败问题求助

为什么图片触发CORS报错，其他文件却正常？ #

1. S3 CORS配置遗漏图片类型：你的S3桶CORS规则大概率只允许了PDF、文档这类MIME类型的跨域GET请求，没覆盖图片格式（比如image/png、image/jpeg）。浏览器对可渲染的图片资源，跨域校验会比普通下载文件更严格，直接触发了CORS拦截。
2. 浏览器资源处理逻辑差异：浏览器会把PDF、文档这类文件识别为「下载资源」，处理逻辑更宽松；但图片会被当成「可渲染资源」，强制校验CORS头，两者的处理路径不同导致了差异。

为什么加mode: 'no-cors'后文件为空？ #

no-cors模式下，fetch返回的是不透明响应（opaque response），浏览器会完全限制你读取响应内容，后续转Blob时拿不到任何数据，最终下载的自然是0字节空文件。

解决方法 #

方法1：直接跳转预签名URL（最简单，绕开CORS）

不需要用fetch，直接创建a标签跳转预签名URL——这种方式不属于AJAX请求，不会触发CORS校验：

const downloadLink = document.createElement('a');
downloadLink.href = '<你的S3预签名URL>';
downloadLink.download = 'file.png'; // 指定下载后的文件名
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink); // 清理DOM元素

方法2：修复S3 CORS配置（适合必须用fetch的场景）

先修改S3桶的CORS配置，确保允许图片类型的跨域GET请求，同时暴露下载必需的响应头：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>你的前端域名</AllowedOrigin> <!-- 生产环境别用*，限制具体域名更安全 -->
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Content-Disposition</ExposeHeader> <!-- 必须暴露这个头，才能正确处理下载逻辑 -->
  </CORSRule>
</CORSConfiguration>

同时，生成预签名URL时要指定Content-Disposition: attachment响应头，让浏览器把图片识别为下载文件而非渲染资源（以Python boto3为例）：

import boto3
s3 = boto3.client('s3')
presigned_url = s3.generate_presigned_url(
    'get_object',
    Params={
        'Bucket': '你的桶名',
        'Key': '图片文件路径',
        'ResponseContentDisposition': 'attachment; filename="file.png"'
    },
    ExpiresIn=3600
)

完成以上配置后，再用你原来的fetch代码就能正常下载图片了。

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