如何将URL中的%23替换为#？S3+CloudFront场景下的解决方案咨询

方案1：修改S3重定向规则并配置CloudFront源（无需额外代码） #

这是最贴合你需求的方案，只需调整现有配置：

1. 确认CloudFront源指向S3静态网站托管域名
   很多人容易踩坑：如果CloudFront源用的是S3 REST API域名（如bucket.s3.amazonaws.com），S3不会触发静态网站的重定向规则。必须切换到S3静态网站的专属域名，格式为：

   bucket-name.s3-website-<region>.amazonaws.com
   

   在CloudFront控制台的源配置里，修改源域名为此地址，并设置源协议策略为HTTP only（S3静态网站仅支持HTTP，CloudFront会帮你处理前端的HTTPS）。

2. 更新S3重定向规则，指定CloudFront域名
   原S3重定向规则失效的核心原因是：S3默认会返回带自身域名的重定向URL，而非CloudFront域名。修改规则，在Redirect块中添加HostName和Protocol参数，强制重定向指向你的CloudFront分发域名：

   [
       {
           "Condition": {
               "KeyPrefixEquals": "%23/"
           },
           "Redirect": {
               "ReplaceKeyPrefixWith": "#/",
               "HostName": "your-cloudfront-domain.com", // 替换为你的CloudFront域名
               "Protocol": "https"
           }
       }
   ]
   

   • ReplaceKeyPrefixWith vs ReplaceKeyWith：前者替换路径前缀（比如%23/path会变成#/path，适配任意子路径）；后者替换整个路径，适合固定路径的场景，显然前者更适合你的SPA路由需求。

3. 验证效果
   访问https://your-cloudfront-domain.com/%23/your-spa-route，应该会被重定向到https://your-cloudfront-domain.com/#/your-spa-route，SPA路由正常加载。

方案2：使用CloudFront Functions轻量处理URL（更高效，无额外开销） #

如果不想依赖S3重定向，CloudFront Functions是比Lambda@Edge更优的选择——它边缘运行、无冷启动、免费额度高，完全适配这种简单的URL修改场景：

1. 创建CloudFront Function
   在CloudFront控制台的「Functions」页面，创建新函数，选择「Viewer Request」事件类型，粘贴以下代码：

   function handler(event) {
       const request = event.request;
       // 将URI中的%23替换为#
       request.uri = request.uri.replace('%23', '#');
       return request;
   }
   

   测试通过后发布函数到「生产」环境。

2. 关联到CloudFront分发
   在CloudFront分发的「缓存行为」中，找到对应路径的行为（或默认行为），设置「函数关联」的「Viewer Request」为你刚创建的CloudFront Function。

3. 验证效果
   访问带%23的CloudFront URL，会直接被修改为带#的路径，无需重定向，SPA路由直接生效，效率更高。

关键注意事项 #

• 确保CloudFront缓存策略允许正确的路径缓存，避免旧的重定向响应被缓存。
• 如果使用方案1，S3静态网站托管必须处于启用状态，重定向规则才会生效。

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