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

标签 angular amazon-s3 progressive-web-apps angular-router bucket

我正在使用 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 错误?

最佳答案

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

  • HTTP 错误代码:404

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

  • HTTP 响应代码:200

它对我有用:)

关于angular - 访问存储在 S3 中的 PWA 的 Angular 路由时出现 *NoSuchKey* 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55920543/

相关文章:

angular - 传入元素以在 Angular 中运行

angular - 如何在 Angular Material 2 中获取当前应用主题的原色或强调色

javascript - 如何在Typescript中获取特定 "keyof"参数的类型?

linux - S3cmd配置无法正常工作错误: S3 error: None

amazon-web-services - 如何使用 Glue 将多个 s3 文件合并为一个

ios - 如何在PWA中的ios中访问摄像头和耳机( react )

progressive-web-apps - 在 Trusted Web Activity APP 中检查独立模式

javascript - WebStorm TypeScript 检查错误 - 未实时显示?

amazon-web-services - aws 网络 elb 不生成日志

oauth - Google 登录 JavaScript 客户端无法在 PWA 应用程序上运行