React Web UI中S3用户头像图片渲染失败问题排查

核心原因 #

返回200但图片无法渲染，本质是S3返回的内容并非图片二进制，而是权限拒绝的XML文本——S3在某些Referer不匹配的场景下，会返回200状态码但内容为错误提示，导致浏览器无法解析为图片。

具体排查与修复步骤 #

1. 修正S3桶策略的Referer规则 #

你的现有策略仅允许http://wecoach.ai/这个精确Referer，但实际场景中存在多种不匹配情况：

• 网站使用HTTPS而非HTTP
• 访问路径不带末尾斜杠（如https://wecoach.ai）
• 带www前缀的域名（www.wecoach.ai）
• 页面路径非根目录（如https://wecoach.ai/profile，Referer为该路径而非根目录）

修改后的策略需覆盖所有可能的合法Referer，添加通配符适配路径变化：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Allow GET requests from wecoach domains",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::wecoach-user-data/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "http://wecoach.ai/*",
                        "https://wecoach.ai/*",
                        "http://www.wecoach.ai/*",
                        "https://www.wecoach.ai/*"
                    ]
                }
            }
        }
    ]
}

2. 验证返回内容 #

在浏览器网络请求的「响应」标签页查看返回内容：

• 如果是<Error><Code>AccessDenied</Code>开头的XML，说明Referer规则不匹配
• 直接在地址栏输入图片URL（此时无Referer），应显示权限错误，证明策略生效逻辑正确

3. 其他检查项 #

• 确认React组件中图片URL拼写完全正确（桶名、对象路径无错误）
• 清除浏览器缓存，避免旧的错误响应被缓存
• 若配置了CORS规则，确保允许wecoach.ai和www.wecoach.ai的跨域请求

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