angular - 访问存储在 S3 中的 PWA 的 Angular 路由时出现 *NoSuchKey* 错误

Question

我正在使用 Angular 7 和 Ionic 4 开发 PWA，并将其存储在 Amazon S3 中的存储桶中。

我的应用程序当然有路线。例如:

myapp.com
myapp.com/items
myapp.com/items/1

App第一次访问，或者更新时，需要通过root url(myapp.com)访问，否则会出现NoSuchKey错误发生。当第一次访问应用程序时访问 myapp.com/items 时，会发生此错误。

原因很明显。 Angular 负责处理路由。当通过根 url 访问 PWA 时，它首先将 PWA 下载到浏览器的缓存中。之后 PWA 处理路由。

但是当第一次通过路由访问应用程序时，例如 myapp.com/items，由于浏览器中没有存储 PWA，请求由 S3 处理，它试图访问存储在存储桶中的名为 items 的对象。这个对象显然不存在。所以我得到一个NoSuchKey错误。

在使用 Angular 路由和 S3 时如何处理 NoSuchKey 错误？

Answer 1

此问题的解决方法是将页面未找到错误重定向到 PWA 索引页面。在 AWS CloudFront 中，转到错误页面并单击创建自定义错误响应。然后填写:

• HTTP 错误代码:404

• 响应页面路径:/index.html

• HTTP 响应代码:200

它对我有用:)