如何使用包含多个来源的 AWS Cloudfront 处理 403 和 404 错误

Question

我在 AWS 中有当前配置：

1. S3 存储桶设置为我的前端的 static 网站

2. ELB，我的后端有一个 EC2 实例

3. 具有两个来源、两种行为和两个自定义错误页面的 Cloudfront 分发

   • 起源：
     • S3 存储桶（静态网站）
     • dev-api.mydomain.com（下面提到的指向ELB的别名记录）
   • 行为：
     • "/api/*" 路由到 dev-api.mydomain.com
     • “*”路由到 S3
   • 错误页面（这部分对我的问题最重要）：
     • 403 返回带有 index.html 的 200 响应（来自 S3）
     • 404 返回带有 index.html 的 200 响应（来自 S3）

4. 53 号公路：

   • 注册域名
   • dev.mydomain.com 指向云端分发
   • dev-api.mydomain.com 指向 ELB

如何区分从 S3 和后端服务器返回的 403 和 404 错误？

注意：我正在使用 react 路由器来处理 static 网站中的所有路由，因此对 S3 的每个请求都会从 S3 返回 404，除非用户特别要求 /index.html 资源。

场景 1 ：当用户访问 dev.mydomain.com/logi（拼写错误的登录）时，我希望它会命中我的 S3 存储桶并返回 404，然后它将获取存储桶中的 index.html 文件。 Cloudfront 将返回 index.html 文件，状态为 200 OK，我的应用程序将通过显示 404 页面来处理无效路由。

场景 2 ：当用户访问 dev.mydomain.com/login 时，它会访问我的 S3 存储桶，返回 404 并返回 index.html 文件。 一旦我登陆登录页面，为了这个例子，我会向 dev.mydomain.com/api/non_existant_route 发起一个网络请求。 我希望它会访问我的 API 服务器并返回 404，然后我的前端将通过显示有关 API 请求失败的错误消息来处理该错误消息。

然而，在场景 2 中发生的情况是 404 从我的后端服务器返回到 Cloudfront，然后返回 index.html 文件（来自 S3）作为带有 200 状态代码的响应。

所以，我的问题是 - 是否可以将 Cloudfront 配置为根据发回错误代码的来源返回不同的错误页面？ 如果没有，我怎样才能完成为后端服务器返回正确的响应？

是否需要我重新设计我的 AWS 解决方案？

Answer 1

另一种方法是：

• 在 S3 上打开 Static Web 托管
• 将 CloudFront 源中的 S3 存储桶名称替换为 S3 Static 网站 URL。
• 从 CloudFront 中删除错误页面。

错误页面将由各自的来源而不是 CloudFront 处理。

Answer 2

通过从云端删除自定义错误响应，我能够解决 403 和 404 问题。

我在路由到我的 S3 存储桶的默认行为 (*) 上创建了 Lambda@Edge function。 在 Origin Request 中，function 修改对 /login 等页面的请求，改为从存储桶返回 /index.html。

Answer 3

就我而言，我也有两个来源，都是一页应用程序 (OPA)，所以都包含index.js

1. React App（负责我的主要应用程序）通过 S3 static 网站托管。 （企业社会责任建设）
2. Webflow App（产品信息和博客等的静态网站）

我们的 React 应用程序根据路由（应用程序需要）有许多不同的行为，所以我将 Webflow 配置为默认行为。

首先，我为404添加了自定义错误处理，将页面路径重定向到/index.js和 HTTP 状态200 ，因为许多应用程序路由不直接存在于S3 Website中并导致 404 （许多技术博客都建议这样做并且效果很好如果是单一来源）

但是，一旦我将 Webflow 网站来源添加为我的Default(*)行为，每当 React 应用程序中出现404时，它将被重定向到默认行为/index.js （我们的 static 产品信息网站）

最后，我删除了所有自定义错误处理，它将按预期开始工作。 所有 React 路由都重定向到 React 行为，而不匹配的行为路由将转到Default(*) Webflow 网站。