我目前正在开发一个带有 Angular4 前端的应用程序。我的生产目标是让前端作为来自 AWS S3 存储桶的静态内容提供服务。
一切正常,但有一个异常,这实际上是应用程序的一个主要问题。当用户注册时,他们会收到一封电子邮件,其中包含用于验证其电子邮件地址的链接。链接格式如下:
https://myhostname.com/user/userguid?token=tokenvalue
由于前端是静态内容,只有页面 index.html 实际存在,所以点击这个链接会产生 404。
现在,经过一些研究,我采取了以下步骤。在 S3 中,我有以下路由规则。
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>myhostname.com</HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
我还有一个将所有 404 错误重定向到 index.html 的 CloudFront 规则。
现在,当有人导航到 myhostname.com/user/userguid?token=tokenvalue 时,URL 被重写为 myhostname.com/#!/user/userguid?token=tokenvalue,但随后用户被重定向到myhostname.com/home(又名 index.html)。
我可以对我的 Angular 应用程序进行哪些更改以获取散列/片段的值并实际路由到该组件(而不是仅仅重定向,这会将用户发送回 index.html)?
请注意,在开发过程中,当通过“npm start”为前端提供服务时,这工作得很好。谢谢大家。
最佳答案
Zack,不幸的是,您选择的方法(索引文档和错误文档都应该是“index.html”)是非常糟糕的方法。
将会发生的情况是您的用户将收到 404 然后重定向 - 这会损害您的 SEO,Chrome 会惩罚您,因为它认为您的网站是网络钓鱼,并且 Safari 支持时好时坏。
更好的选择是:
- 移除错误页面重定向到 index.html,
- 将 Cloudfront 放在 S3 存储桶前面
- 在重定向到/index.html 的云端设置自定义错误响应代码,并且(最重要的是!)提供 200 Http 响应代码
关于angular - 当应用程序是托管在 S3 中的静态内容时路由到 Angular 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45485386/