angularjs - 将所有 AWS S3 http 请求重定向到 AngularJS HTML5Mode 的 index.html

Question

如何将所有对静态 AWS S3 网站的请求重定向到 index.html，以便我可以使用 AngularJS 的 HTML5 模式？

我最近了解到(让我无限高兴的是)可以通过使用 HTML5 Mode 来使用 AngularJS，而无需在 URL 中使用 # 。不过，我从this answer得知这需要在服务器上进行一些设置，因为所有请求都必须重定向到正确的 html 文件(在本例中为 index.html)才能正常工作。

我的网站使用 AWS S3 的静态网站托管。我尝试将其添加到我的重定向规则中:

<RoutingRules>
     <RoutingRule>
         <Redirect>
             <ReplaceKeyWith>/</ReplaceKeyWith>
         </Redirect>
     </RoutingRule>
</RoutingRules>

和

<RoutingRules>
     <RoutingRule>
         <Redirect>
             <ReplaceKeyWith>index.html</ReplaceKeyWith>
         </Redirect>
     </RoutingRule>
</RoutingRules>

但我遇到了重定向过多的问题。

有没有办法通过静态网站托管在 AWS S3 中进行必要的重定向？

Answer 1

您可以将 AWS CloudFront 用于您的使用案例。在CloudFront后面设置S3存储桶并添加index.html作为默认路由。

如果页面以 Angular 路由(例如/home)刷新，AWS CloudFront 将在 S3 中搜索/home.html 文件并返回 404:未找到响应。不过，有一个解决方法，您可以为 404: Not Found HTTP 错误代码设置自定义错误响应，以指向/index.html 响应页面路径。

有关更多详细信息，请参阅博客文章 Using AWS CloudFront to serve an SPA hosted on S3 .