Angular 10 + AWS S3 + Cloudfront：无需哈希导航

Question

我在这里看到了很多关于使用Apache服务器的类似问题，但是对于我的应用程序，我使用AWS S3和Cloudfront，我需要让应用程序在URL没有丑陋的哈希标记的情况下工作。

是否有任何方法可以刷新或直接点击链接而不使用哈希标记？

如果需要代码的任何部分，我可以包含它，但我认为没有必要，因为没有任何东西失败，我只需要一个可行的策略。

顺祝商祺。

我的应用程序路由模块。

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true })
  ],
  exports: [
    RouterModule
  ]
})

去掉"hash true"对于导航功能是有效的，但不适用于页面刷新或直接链接。

- DJG22

---

你已经查看了 https://dev59.com/qlQJ5IYBdhLWcg3wFxx_ 吗？ - kgiannakakis

我需要应用程序在没有丑陋的哈希标记的情况下正常工作。为什么？你想要实现什么目标？ - gusto2

产品管理认为哈希不够友好，对他们来说不起作用。我可以接受，但遗憾的是我不能制定要求。 - DJG22

检查404的配置。它应该返回index.html https://dev59.com/yKDia4cB1Zd3GeqPD3Nv - Sergey

Answer 1

在提供解决方案之前，让我简要解释需要做什么。通常，在单页面应用程序（SPA）中，通过JavaScript代码操作视图和/或监视URL和导航历史事件来实现页面导航。当您启动应用并单击不同的链接（例如/user），应用程序不会重新加载，它仍然是通过根index.html加载的相同应用程序，该应用程序通过更改到相应的视图或组件并在地址栏中修改URL来响应单击的链接。

但是，如果您直接在打开浏览器后导航到example.com/user，浏览器将向不存在于S3存储桶中也不存在于CloudFront分发中的/user路径发送请求，然而，它将失败。我们的目标是强制S3和Cloudfront始终返回根index.html文件，而不管请求的原始路径是什么。

为了实现这一点，您需要稍微更改S3桶和Cloudfront分发的配置。

在进行与AWS相关的更改之前，请将RouterModule导入的useHash属性更改为false:

RouterModule.forRoot(routes, { useHash: false })

1. 在AWS Web控制台中打开您的S3存储桶，进入“属性”选项卡，在“静态网站托管”部分中找到它，如果未启用，请启用它，并将index.html放入索引文档和错误文档两个字段中。

然后保存配置。实际上，现在您的index.html文件将为与根路径相同的任何路径提供服务。当您在应用上述更改后打开您的网站时，您应该已经注意到了。但是，您会发现响应代码是404，尽管应用程序正确地打开了-这是因为它仍然是“未找到”的响应，因为路径不存在。还需要在cloudfront配置中进行一些更改，以使其更好地工作。

2. 导航到AWS Web控制台中的CloudFront分发页面。我假设由于您已经拥有CloudFront分发（您在问题中提到了它），所以您可能已经拥有所有默认设置，并且您的S3存储桶已连接为此分发的起源。导航到“错误页面”选项卡，然后单击“创建新的自定义错误响应”。在“自定义”输入中选择“是”，选择错误代码404，将“/index.html”写入“响应页路径”输入，并选择响应的200OK代码。然后保存配置。可能需要几分钟才能开始工作。

现在尝试打开网站-您不应再看到404响应，因为现在所有请求（即使是不存在的路径）都具有200代码。

- Artem Arkhipov

---

非常感谢您的详细解释，我按照您的步骤一步一步地操作，现在我的URL已经可以正常工作了，没有哈希符号。 - DJG22

当我刷新页面时，出现了一个空白的“301永久重定向”屏幕，但并没有成功。 - user1653042

Answer 2

移除哈希策略，

RouterModule.forRoot(routes, {
  useHash: false
});

前往您的存储桶的静态网站托管设置，并将错误文档设置为index.html。

基本上，我们只想在所有情况下提供index.html，因为angular构建没有像静态网站那样的路由文件夹结构。

现在您的路由将如下所示：

localhost:4200/home

改为：

localhost:4200/#/home

AWS 参考文献：https://docs.aws.amazon.com/AmazonS3/latest/userguide/CustomErrorDocSupport.html#custom-error-document

- Zee