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

Question

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

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

Answer 1

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

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

More on Lambda@Edge

Answer 2

我遇到了同样的问题，解决方法如下：

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