Amazon S3存储桶静态网站css、js文件夹内容无法被HTML加载

问题排查与解决方案 #

• 先打开浏览器开发者工具的「网络」标签，刷新页面查看css、js资源加载的HTTP状态码：
  • 若返回404：检查路径大小写，S3对象键严格区分大小写，需确认HTML中写的css/normalize.css、js/main.js等路径，与S3内的文件夹、文件名大小写完全一致，包括后缀名也需核对。如果是大小写不匹配，修改HTML引用路径或者修改S3内的文件/文件夹名即可。
  • 若返回403：优先检查单个文件的公开权限，S3的文件夹权限不会自动继承到内部文件，你需要单独确认每个css、js文件本身已配置全局读取权限。其次检查存储桶策略，确认没有规则拦截css/、js/路径下的资源访问。
• 把HTML中css、js的引用路径修改为绝对路径，在路径前加/，示例：

  <link rel="stylesheet" href="/css/normalize.css" />
  <link rel="stylesheet" href="/css/main.css" />
  <script src="/js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="/js/plugins.js"></script>
  <script src="/js/main.js"></script>
  

  避免相对路径在子页面访问时出现路径拼接错误。
• 检查S3静态网站托管配置，确认没有配置多余的重定向规则拦截静态资源路径，索引文档已正确设置为index.html。
• 若以上配置都正常，清除浏览器缓存或者使用无痕模式测试，避免本地旧缓存导致资源加载失败。

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