如何将 CloudFront 设置为每个源都有一个自定义错误页面

Question

我正在尝试使用 S3 和 Cloudfront 在 AWS 上部署一个 Angular 应用程序。我们的 Angular 应用程序正在一个 Spring 应用程序上进行通信，该应用程序作为我们驻留在 EC2 实例上的后端应用程序。我已经将 CloudFront 配置为将/api请求重定向到我们的后端，并将其他所有内容重定向到前端。现在，我已经为 403 和 404 设置了 Cloudfront 的自定义错误响应，以返回我们的 angular 的 index.html。问题是当我们的 fontend 尝试向我们的后端发送 API 调用并返回 404 和有效的 json 响应时，而不是接收 json。我们得到 index.html 文件。

我想要实现的是，如果用户访问http://somedomain.com/invalid-path，他们会得到 index.html 但如果他们尝试 API 调用 http://somedomian.com/api /v1/invalid-path他们应该得到后端服务器返回的信息。

Answer 1

我遇到了同样的问题并解决如下：

• 将 S3 存储桶配置为具有“静态网站托管”并将 index.html 设置为“错误文档”。
• 将 CloudFront 源更改为指向 S3 静态网站终端节点的“自定义源”，而不是直接指向 S3 存储桶的“S3 源”。
• 然后可以从 CloudFront 发行版中删除“错误页面”配置。

Answer 2

您可以创建事件类型的 Lambda 函数关联Origin response来修改状态代码和正文内容。您需要将其添加到behaviors用于前端应用程序的 CloudFront 中。这是示例。

您可以添加 302 标头并重定向到静态错误页面的位置（缓存行为），或者您可以附加内容response.body并将状态代码更改为 200。

更多关于 Lambda@Edge