S3 Bucket图片下载遇CORS跨域错误求助

针对你遇到的跨域拦截问题，以下是具体排查和解决步骤：

1. 简化并验证CORS配置 #

你的CORS配置中AllowedOrigins同时包含*和具体域名，*已覆盖所有源，可简化配置避免潜在匹配问题。更新后的配置如下：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "HEAD"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": ["ETag"],
        "MaxAgeSeconds": 3000
    }
]

• 仅保留下载所需的GET/HEAD方法，减少不必要权限暴露；
• 保存配置后等待5-10分钟，S3配置更新可能存在延迟。

2. 检查S3对象权限 #

确保目标图片对象允许匿名读取：

• 登录S3控制台找到对应图片，右键修改权限，勾选「所有人」的「读取」权限；
• 或添加桶策略批量允许GET请求：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": ["s3:GetObject"],
            "Resource": "arn:aws:s3:::mobilads-maps-hosting/public/prod/campaign-shoots/*"
        }
    ]
}

3. 绕过CORS的直接下载方案（最有效） #

浏览器原生下载行为不受CORS限制，可修改代码跳过fetch请求：

downloadImages = (s3Url) => {
    const urlParts = s3Url.split('/');
    const imageName = urlParts[urlParts.length - 1];
    const a = document.createElement('a');
    a.href = s3Url;
    a.download = imageName;
    a.rel = "noopener noreferrer";
    document.body.appendChild(a);
    a.click();
    a.remove();
}

这种方式直接利用浏览器下载能力，完全规避跨域校验问题。

4. 清除浏览器缓存 #

浏览器会缓存旧的CORS响应头，导致新配置不生效：

• 使用无痕模式测试，或清除当前域名缓存后重试。

5. 验证S3端点正确性 #

确认S3 URL端点与桶所在区域匹配，例如桶在us-east-1时URL为https://bucket-name.s3.amazonaws.com/...；其他区域需使用区域特定端点（如https://bucket-name.s3.us-west-2.amazonaws.com/...）。

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