S3 CORS错误频发：UI上传图片遇403跨域问题

我来帮你拆解这个让人头疼的问题——这种时好时坏的CORS+403报错，通常和权限配置、ACL设置以及浏览器缓存脱不了干系，咱们一步步排查解决：

1. 补全IAM用户的关键权限 #

你当前的IAM只授权了putObject和getObject，但上传时你指定了public-read ACL，这就要求IAM用户必须拥有s3:PutObjectAcl权限！没有这个权限的话，S3会拒绝你设置ACL的操作，返回403，而这个403响应往往不会携带CORS头，被浏览器误判成CORS错误。

赶紧更新你的IAM权限策略，添加这个必要权限：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:PutObjectAcl"
      ],
      "Resource": "arn:aws:s3:::foo/*"
    }
  ]
}

2. 检查S3桶的「块公共访问」设置 #

如果你的桶开启了阻止公共ACL的相关设置，哪怕IAM有权限，上传时带public-read ACL也会被直接拒绝，返回403。去S3控制台的桶权限页面，找到「Block Public Access」，确认以下选项是否关闭（如果你的业务确实需要公开这些图片的话）：

• Block public access to buckets and objects granted through any access control lists (ACLs)

3. 排除Chrome缓存导致的时好时坏 #

Chrome会缓存预检请求（OPTIONS请求）的结果，有时候旧的缓存结果会干扰新请求，导致时好时坏的情况。测试时打开Chrome开发者工具的「Network」标签，勾选「Disable cache」，然后重新上传图片，看是否还会出现错误。

4. 手动验证预检请求 #

用curl手动发送OPTIONS请求，直接排查S3的响应是否正常：

curl -X OPTIONS -H "Origin: https://foo.com" -H "Access-Control-Request-Method: PUT" https://foo.s3.amazonaws.com/items/images/e75768-2018-0-26/roar-bomber.png

• 如果返回403：说明是权限或桶配置问题，回到步骤1和2检查；
• 如果返回200且带有Access-Control-Allow-Origin: https://foo.com头：那问题大概率出在浏览器缓存或者前端请求的细节上（比如是否正确携带了ACL参数）。

为什么会时好时坏？ #

最可能的原因是：有时候请求因为权限缺失触发403（无CORS头），有时候可能因为某些临时因素（比如浏览器缓存了之前的有效预检响应）让请求侥幸通过，从而造成“时好时坏”的假象。补全权限后，这个问题应该就能彻底解决。

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