如何使用 CloudFront 作为我的 App Runner 服务的反向代理？

Question

我有一个运行 NodeJS/Express 服务器的 App Runner 服务，它是一个 REST API。应用程序运行器给了我以下终点 - https://example_server_random_id.awsapprunner.com

前端使用 React 开发，并作为静态网站部署在 S3 中。我创建了一个 CloudFront 发行版，用于从 S3 提供静态内容，并具有默认行为 (*)。CloudFront 给了我以下 URL - https://cloud_front_ranom_id.cloudfront.net

因此，我更新了后端代码以支持 CORS 并将 CloudFront URL 添加为允许的来源。在 React 应用程序中，我使用 App Runner URL 作为所有 API 调用的基本 URL。这个设置工作完美。

现在，我想通过使用 CloudFront 发行版作为我的 App Runner 服务的反向代理来摆脱 CORS 相关设置。为此，我做了以下工作 -

我添加了一个指向我的 App Runner 服务端点的自定义源 - https://example_server_random_id.awsapprunner.com
我创建了一个优先级为 0 的新行为 (/api*)，因此它应该处理路径中包含“/api”的所有请求，而不是默认行为 (*)。此行为使用我在上一步中创建的自定义源。
我已允许此新行为的所有 HTTP 请求（GET、POST、OPTION、PUT 等）。
对于新行为，我使用“CachingDisabled”作为缓存策略，使用“All Viewer”作为源请求策略。
我已替换基本 URL 并使用 /api 作为新的基本 URL，而不是 App Runner 端点。
我没有从后端代码中删除 CORS 相关设置（access-control-allow-origin 标头值是 CloudFront 端点，access-control-allow-credential 标头值是 true）。

此设置未按预期工作。我仍然可以访问静态内容，但对于后端的所有请求（使用 /api 基本 URL）都会出现以下错误 -

Cannot POST /api/users/sign-in Status Code: 404
Cannot GET /api/users Status Code: 404
etc.

您能否告诉我是否有任何方法可以调试此问题以及设置中可能存在什么问题？

Answer 1

我正在写下我是如何解决这个问题的，以防有人遇到同样的问题。

基本上，问题出在我使用的缓存策略上。我使用以下 webhook 测试器找出标头值、查询参数和 cookie，并修改缓存策略以使用旧的缓存设置（适当的标头、cookie 和查询参数）- https://webhook.site/