首页 > 解决方案 > 如何将 CloudFront 设置为每个源都有一个自定义错误页面

问题描述

我正在尝试使用 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他们应该得到后端服务器返回的内容。

标签: amazon-web-servicesamazon-cloudfront

解决方案


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

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

更多关于 Lambda@Edge


推荐阅读