React应用从AWS S3桶加载图片时出现CORS错误（部分异常）

问题现象 #

使用fetch API从AWS S3桶加载图片时，部分图片会触发CORS错误，错误信息如下：

Access to fetch at 'https://supersconto-images-bucket.s3.eu-west-3.amazonaws.com/1698072059990-page_1.jpeg' from origin 'https://dashboard.supersconto24.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

前端处理图片的代码：

const getFileFromUrl = async (url, name, defaultType = "image/jpeg") => {
    const response = await fetch(url);
    const data = await response.blob();
    return new File([data], name, {
      type: data.type || defaultType,
    });
}

// 组件内使用
useEffect(() => {
    if (imgSrc) {
        getFileFromUrl(imgSrc, "test").then((r) => {
            const reader = new FileReader();
            reader.addEventListener("load", () => setSrc(reader.result));
            reader.readAsDataURL(r);
        });
    }
}, [imgSrc]);

AWS配置详情 #

S3桶策略 #

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::supersconto-images-bucket/*"
        }
    ]
}

CORS策略 #

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "Access-Control-Allow-Origin"
        ],
        "MaxAgeSeconds": 10000
    }
]

已尝试的方案 #

• 更新CORS策略为允许所有源（*）
• 确认S3桶策略允许s3:GetObject公共访问
• 审查前端图片获取与处理代码
• 测试桶内不同图片，发现部分成功部分报错

可能的解决方向 #

• 排查浏览器缓存问题：部分图片可能缓存了无CORS头的旧响应，可通过强制刷新浏览器（Ctrl+Shift+R）测试，或在请求URL后添加随机参数（如${url}?t=${Date.now()}）绕过缓存。
• 检查单个对象权限：虽然桶策略是公共读，但个别图片可能设置了独立的对象权限。进入S3控制台找到出错图片，查看「权限」标签下的「对象所有权」和「访问控制列表」，确认是否允许GetObject操作。
• 验证CDN缓存配置（若使用）：如果S3前端配置了CloudFront等CDN，需确保缓存行为包含Access-Control-Allow-Origin等CORS相关响应头，且缓存策略不会忽略这些头。
• 优化前端请求逻辑：若仅需展示图片，可直接设置img标签的src属性（浏览器加载图片的CORS规则与fetch不同）；若必须用fetch处理，可显式指定mode: 'cors'：

  const response = await fetch(url, { mode: 'cors' });
  

• 确认S3区域与请求端点一致：检查请求的S3端点（eu-west-3）和桶实际所在区域是否匹配，跨区域访问可能导致CORS策略不生效。
• 查看AWS CloudTrail日志：通过CloudTrail查看出错图片的请求记录，确认请求是否被正确处理，是否存在权限拒绝事件，定位问题根源。

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