S3静态网站托管URL编码异常致404：空格与符号处理问题

我之前也踩过S3静态网站托管的这个编码坑，结合你的情况，给你梳理下问题原因和具体解决方案：

问题根源 #

S3静态网站托管的路由编码逻辑和浏览器默认行为存在差异：

• 浏览器请求路径里的空格会被自动转成%20，但S3有时会把请求中的空格解析为+；
• 对于?这类特殊字符，浏览器会保留原字符发送请求，但S3会把?当成查询参数的分隔符，而非对象键的一部分——也就是说，当你请求/AniketFuryRocks/What is Lorem Ipsum?时，S3实际在找AniketFuryRocks/What is Lorem Ipsum这个对象，自然返回404。

而你用encodeURI()的问题在于：它不会编码?、/这类属于URI结构的字符，所以处理后?依然保留，无法被S3识别为对象键的一部分。

解决方案 #

1. 存储对象时用正确的编码方式 #

改用encodeURIComponent()对文件名（或路径中包含特殊字符的分段）进行编码，它会把所有特殊字符（包括?、空格）都转成S3能识别的编码格式。

举个JavaScript示例：

// 原始路径部分
const folderName = "AniketFuryRocks";
const fileName = "What is Lorem Ipsum?";

// 仅对文件名部分编码，保留目录分隔符
const encodedFileName = encodeURIComponent(fileName);
// 最终的S3对象键
const s3ObjectKey = `${folderName}/${encodedFileName}`;

// 此时s3ObjectKey的值为："AniketFuryRocks/What%20is%20Lorem%20Ipsum%3F"

用这个编码后的键存储对象，就能和S3静态网站的路由编码逻辑匹配，避免404。

2. 用S3重定向规则修复已存在的对象 #

如果已经有大量按错误编码存储的对象，不想重新上传，可以在S3静态网站托管的重定向规则中添加映射，自动修正请求路径的编码：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals>AniketFuryRocks/</KeyPrefixEquals>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>your-bucket.s3-website-your-region.amazonaws.com</HostName>
      <!-- 对请求的键进行URL编码，替换原路径前缀 -->
      <ReplaceKeyPrefixWith>AniketFuryRocks/${urlencode:${key}}</ReplaceKeyPrefixWith>
      <HttpRedirectCode>301</HttpRedirectCode>
    </Redirect>
  </RoutingRule>
</RoutingRules>

这个规则会在用户请求返回404时，自动对请求路径进行编码后重定向，匹配到正确的对象键。

3. 注意对象键的命名规范 #

S3对象键支持UTF-8字符，但保留字符（如?、&、+等）必须经过URL编码才能作为键的一部分，否则会被S3解析为URI结构的一部分，导致路由匹配失败。

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