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

Question

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

我要实现的目标是，如果用户访问http://somedomain.com/invalid-path，他们将获得index.html的服务，但是如果他们尝试对http://somedomian.com/api/v1/invalid-path进行API调用，他们应该获得最终服务器返回。

Answer 1

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

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

Answer 2

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

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

More on Lambda@Edge