AWS S3静态站点子目录相对路径资源404问题求助

这种情况我之前部署S3静态站点时也碰到过，核心问题是浏览器对相对路径的解析逻辑和S3静态托管的URL结构不匹配导致的。下面是几个针对性的解决方案，按优先级推荐：

1. 给页面设置<base>标签（最稳妥） #

这是解决相对路径解析问题的通用方案，能从根源上统一页面资源的基准路径。在你/subfolder/foo.html的<head>标签里添加以下代码：

<head>
  <base href="/subfolder/">
  <!-- 其他头部内容比如meta、title等 -->
</head>

添加后，页面里所有的相对路径（比如vendor/Three.min.js）都会自动基于/subfolder/来解析，最终请求路径就是你期望的http://my.site.s3-website-eu-west-1.amazonaws.com/subfolder/vendor/Three.min.js。

如果你的站点有多个子目录，每个子目录下的页面只需要把href值改成对应子目录的路径即可（比如/another-subfolder/）。

2. 使用绝对路径引用资源 #

如果不想设置<base>标签，也可以直接把资源引用改成绝对路径。比如把：

<script src="vendor/Three.min.js"></script>

改成：

<script src="/subfolder/vendor/Three.min.js"></script>

这种方法的好处是不需要额外配置标签，但缺点是如果后续子目录结构调整，你需要手动修改所有页面里的资源引用路径，维护成本会高一些。

3. 检查并修正URL访问方式 #

有时候问题出在你访问页面的URL上：

• 如果你习惯用不带.html后缀的URL（比如http://my.site.../subfolder/foo），而S3默认不会自动映射到foo.html，这时候浏览器会认为当前路径是/subfolder/foo/，相对路径就会解析错误。
• 解决办法是在S3静态网站托管的重定向规则里添加规则，把不带后缀的请求重定向到带.html的版本：

  <RoutingRules>
    <RoutingRule>
      <Condition>
        <KeyPrefixEquals>subfolder/</KeyPrefixEquals>
        <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
      </Condition>
      <Redirect>
        <ReplaceKeyPrefixWith>subfolder/$1.html</ReplaceKeyPrefixWith>
        <HttpRedirectCode>301</HttpRedirectCode>
      </Redirect>
    </RoutingRule>
  </RoutingRules>
  

  配置后，访问/subfolder/foo会被301重定向到/subfolder/foo.html，浏览器地址栏会显示正确的路径，相对路径自然就解析正常了。

4. 最后确认资源权限和存在性 #

别忘了检查/subfolder/vendor/Three.min.js是否确实存在于你的S3存储桶中，并且已经设置了公开可读的权限（可以通过桶策略允许匿名用户读取静态内容，或者给单个对象添加公共读权限）。如果资源本身不存在或者权限不足，也会返回404错误。

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