Amazon S3存储桶中JS/CSS文件403访问错误求助

遇到这种情况很常见，通常是S3的权限配置、静态网站设置或者路径问题导致的，我给你一步步排查解决的方案：

• 检查对象级别的读取权限：
  每个JS和CSS文件需要具备公开读取的权限（或者至少能被访问者获取）。你可以在S3控制台选中目标文件，右键选择「修改权限」，添加「所有人」的读权限；如果文件数量多，用AWS CLI批量设置更高效：

  aws s3 cp s3://your-bucket-name/ s3://your-bucket-name/ --acl public-read --recursive
  

  记得替换your-bucket-name为你的存储桶名称。

• 验证存储桶策略配置：
  确保存储桶有允许公共读取的策略，避免权限冲突。在存储桶的「权限」标签下找到「存储桶策略」，添加以下策略（替换占位符）：

  {
    "Version": "2012-10-17",
    "Statement": [
      {
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::your-bucket-name/*"
      }
    ]
  }
  

  注意：如果存储桶有其他拒绝访问的策略，会优先执行拒绝规则，要确保没有冲突。

• 确认静态网站托管的正确配置：
  如果你是用S3托管静态网站，必须开启「静态网站托管」功能：

  1. 在存储桶的「属性」标签找到「静态网站托管」，选择「启用」
  2. 设置「索引文档」为index.html
  3. 访问时必须使用S3提供的静态网站域名（格式类似your-bucket.s3-website-<region>.amazonaws.com），而不是对象存储域名（your-bucket.s3.amazonaws.com），后者可能无法正确解析相对路径的资源。

• 排查文件路径与大小写问题：
  S3是大小写敏感的，所以要确保index.html里的资源路径和S3中文件的实际路径完全一致（包括文件夹名、文件名的大小写）。比如你引用的是<script src="/js/main.js"></script>，要确认存储桶根目录下确实有js文件夹，里面有main.js文件，而不是JS/Main.js。另外，相对路径和绝对路径的使用要符合你的目录结构。

• 关闭不必要的「阻止公共访问」设置：
  这是很多人踩坑的点！在存储桶的「权限」标签下找到「阻止公共访问」，确保以下选项没有勾选（如果需要公开访问静态资源）：

  • 阻止所有公共访问
  • 阻止新的公共访问权限
  • 忽略公共权限

• 用命令行测试权限（排查深层问题）：
  如果以上步骤都没解决，用AWS CLI测试单个文件的访问权限，看具体错误信息：

  aws s3api head-object --bucket your-bucket-name --key path/to/your/file.js
  

  命令返回的错误会告诉你是权限被拒绝、资源不存在还是其他问题，帮助定位根源。

如果还是无法解决，可以查看AWS CloudTrail的日志，里面会记录具体的访问请求和拒绝原因，进一步排查。

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