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

Question

我在这里看到了很多解决这个问题的问题，但是使用 apache 服务器，对于我的应用程序，我使用 AWS S3 和 Cloudfront，我需要应用程序在 URL 上没有丑陋的哈希的情况下工作。

有没有什么方法可以刷新或直接点击链接而不使用哈希？

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

问候。

我的应用程序路由模块

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

删除散列 true 适用于导航，但不适用于页面刷新或直接链接

Answer 1

在编写解决方案之前，让我简要解释一下需要做什么。一般来说，单页应用程序 (SPA) 中的页面导航是通过 javascript 代码操作视图和/或监视 url 和导航历史记录事件来实现的。例如/user，当您启动应用程序并单击不同的链接时，应用程序不会重新加载，它仍然是通过 root 加载的同一个应用程序，index.html它通过更改为相应的视图或组件并修改地址栏中的 url 来对单击的链接做出反应。

但是，如果您在打开浏览器后直接导航到example.com/user（没有初始加载根 example.com），浏览器将向/user实际不存在的路径发送请求，也不在 S3 存储桶中，也不在 Cloudfront 分发中，尽管它会失败的。我们的目标是强制 S3 和 Cloudfront 始终返回根 index.html 文件，而与请求的原始路径无关。

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

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

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

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

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

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

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