React+TypeScript获取S3指定文件夹图片遇403错误求助

你当前的S3桶策略仅授权了s3:GetObject操作，但你发起的https://communitycore-dev-img.s3.amazonaws.com/?list-type=2&prefix=avatars/default/请求对应的是S3 ListObjectsV2 API，该操作需要s3:ListBucket权限——因为桶策略没配置这个权限，所以返回403禁止访问。

以下两种方案可根据你的实际需求选择：

方案1：修改桶策略，添加限定范围的ListBucket权限 #

如果必须通过API动态列出avatars/default/路径下的所有文件，可以给匿名用户添加s3:ListBucket权限，同时通过Condition限定仅能访问指定前缀，避免泄露桶内其他路径内容：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::communitycore-dev-img/avatars/default/*"
    },
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:ListBucket",
      "Resource": "arn:aws:s3:::communitycore-dev-img",
      "Condition": {
        "StringEquals": {
          "s3:prefix": "avatars/default/"
        }
      }
    }
  ]
}

修改后重新发起原fetch请求，即可正常获取文件列表。

方案2：直接请求已知文件名的图片（无需List权限） #

如果图片文件名是固定的、或可通过其他业务逻辑获取，可跳过列表请求，直接构造单个图片URL发起请求，完全适配当前桶策略：

// React示例代码
const defaultAvatars = [
  'https://communitycore-dev-img.s3.amazonaws.com/avatars/default/avatar-01.png',
  'https://communitycore-dev-img.s3.amazonaws.com/avatars/default/avatar-02.jpg',
  'https://communitycore-dev-img.s3.amazonaws.com/avatars/default/avatar-03.svg'
];

function AvatarGallery() {
  return (
    <div className="avatar-container">
      {defaultAvatars.map(url => (
        <img key={url} src={url} alt="Default avatar" className="avatar-item" />
      ))}
    </div>
  );
}

export default AvatarGallery;

额外检查项 #

• 确认桶策略中的Resource路径拼写完全正确，尤其是avatars/default/结尾的斜杠不能遗漏；
• 若桶开启了访问控制列表（ACL），需确保匿名用户的读取权限未被ACL限制；
• 检查AWS区域是否匹配：你的桶在us-east-1，当前请求的域名communitycore-dev-img.s3.amazonaws.com是该区域的正确域名，无需调整。

内容的提问来源于stack exchange，提问作者Alexis Yáñez