无法从Angular应用访问S3存储桶图片，报403禁止错误

优先排查：S3的CORS配置 #

哪怕图片本身设为公开，浏览器的同源策略会限制Angular这类前端应用跨域拉取资源，这是最常见的原因。给S3桶配置正确的CORS规则：

• 登录AWS控制台，找到目标存储桶，进入「权限」标签页
• 找到「跨域资源共享(CORS)」，替换成以下规则（生产环境建议把AllowedOrigins改成你的Angular域名，比如https://your-app.com，测试阶段用*）：

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

• 保存后清空浏览器缓存再测试

其他可能的问题及解决办法 #

1. 确认对象ACL和桶策略真的生效

   • 检查单张图片的ACL是否设为public-read
   • 桶策略要允许所有用户的GET请求，示例：

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::你的桶名/*"
           }
       ]
   }
   

2. Angular请求头不要画蛇添足

   • 如果用HttpClient请求图片，别加多余的自定义头（比如Content-Type），额外头会触发OPTIONS预检请求，S3没允许的话就会403。直接用<img>标签加载是最稳妥的，浏览器会自动发送简单GET请求。

3. 清空缓存

   • 浏览器可能缓存了之前的错误响应，打开F12开发者工具，在「网络」页勾选「禁用缓存」再刷新。要是用了CloudFront这类CDN，也得清空CDN缓存。

4. 本地代理配置排查

   • 本地开发用了proxy.conf.json的话，检查代理规则有没有把S3请求转错，别让代理添加了错误的头或者修改了请求路径。

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