同AWS账号下，如何让部署在S3 Bucket的React应用无需AWS Signed URLs访问private S3 Bucket？

嘿，这个需求我太熟悉了——签名URL的过期时间确实会给前端展示带来不少麻烦，尤其是图片这类需要长期访问的资源。同AWS账号下，我们有几个靠谱的方案能实现你的目标，既保持存储桶的私有性，又不用依赖签名URL，下面给你拆解一下：

方案一：通过S3桶策略+CORS配置实现直接访问（适合简单场景） #

这种方法是让私有存储桶仅允许来自你的React网站桶域名的请求访问其内容，同时配置CORS解决跨域问题：

• 第一步：给私有存储桶添加桶策略，允许来自网站桶静态域名的GET请求。比如你的网站桶静态域名是my-react-app.s3-website-us-east-1.amazonaws.com，桶策略可以这么写：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-private-bucket/*",
      "Condition": {
        "StringEquals": {
          "aws:Referer": "http://my-react-app.s3-website-us-east-1.amazonaws.com"
        }
      }
    }
  ]
}

这里用aws:Referer条件限制只有来自你网站的请求才能访问，一定程度上保证安全性，但要注意Referer头是可以伪造的，所以这个方案更适合非敏感资源的场景。

• 第二步：给私有存储桶配置CORS规则，允许来自网站域名的跨域请求：

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["http://my-react-app.s3-website-us-east-1.amazonaws.com"],
    "ExposeHeaders": []
  }
]

配置完之后，你在React里直接用私有桶的对象URL（比如https://your-private-bucket.s3.amazonaws.com/image.jpg）就能加载资源了，不需要签名。

方案二：使用CloudFront + Origin Access Control（OAC）（生产环境推荐） #

如果你的资源比较敏感，或者需要更强的安全性，这个方案是最优解。原理是让CloudFront作为唯一能访问私有存储桶的实体，用户通过CloudFront域名访问资源，而私有桶始终保持私有：

• 第一步：创建CloudFront分配，把你的React网站桶设置为主源，同时添加私有存储桶作为另一个源（或者直接把两个桶都作为源，根据你的路由需求配置）。
• 第二步：为私有存储桶的源创建Origin Access Control（OAC），并关联到CloudFront分配。这个OAC会让CloudFront获得访问私有桶的权限，同时拒绝其他直接访问私有桶的请求。
• 第三步：给私有存储桶添加桶策略，允许OAC对应的CloudFront身份访问其对象：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-private-bucket/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/your-cloudfront-distribution-id"
        }
      }
    }
  ]
}

• 第四步：在React里，所有资源链接都改用CloudFront的域名，比如https://your-cloudfront-domain.com/private-bucket/image.jpg。用户访问时，CloudFront会从私有桶获取资源并返回，全程不需要签名URL，而且私有桶不会暴露给公网。

方案三：通过后端代理访问（适合需要额外权限校验的场景） #

如果你的应用需要对资源访问做更细粒度的权限控制（比如只有登录用户才能访问），可以加一层后端服务（比如AWS Lambda或者EC2）：

• 后端服务通过IAM角色获得访问私有存储桶的权限，不需要签名URL。
• React前端请求后端接口，后端从私有桶获取资源后返回给前端。
• 这种方式能完全控制资源的访问权限，同时私有桶的安全性最高，但需要额外维护后端服务。

备注：内容来源于stack exchange，提问作者Zain Khan