AWS CloudFront和服务器端渲染（Nuxt）出现问题

Question

AWS CloudFront和Nuxt服务器端渲染存在问题

这是我的应用程序的组成部分：

• 在EC2上运行的Java后端
• Nuxt前端（Vue），在API Gateway + Lambda + S3（使用无服务器框架）上运行服务器端渲染

作为应用程序的入口点，我有一个CloudFront发行版，它将后端请求（/ api / *）拆分到EC2实例，将前端请求（默认）拆分到API Gateway端点，因此前端是服务器端由Lambda渲染。

前端代码使用公共CloudFront URL向后端执行HTTP请求以检索数据（由于渲染是混合的，因此第一次是在服务器端运行，但是如果用户导航回主页，则会进行渲染客户端）。

这是调用流程：

浏览器=> CloudFront（前端路径）=> API网关=> Lambda（渲染应用程序）=> CloudFront（后端路径）=> EC2

当调用CloudFront时，Lambda函数会收到403错误（“ x-cache”：['cloudfront中的错误”），而没有其他详细信息。

但是，如果我直接浏览API网关中的前端（绕过CloudFront），则一切正常：

浏览器=> API网关=> Lambda（渲染应用程序）=> CloudFront（后端路径）=> EC2

我不明白为什么通过CloudFront调用Lambda函数会影响其向CloudFront URL发出HTTP请求的能力，或者换句话说，为什么CloudFront拒绝该请求。

Answer 1

AWS 支持澄清了问题。

有一个“Via”头，每次涉及 CF 时都会添加一个额外的值，并且头不能包含超过 2 个 CF 引用。

Serverless 生成的 API Gateway 是 Edge-Optimized，所以需要经过最近的 CF Edge Location，请求中涉及的 CF 分布数变为 3，这是不允许的。

解决方案是使用区域 API 网关而不是边缘优化的 API 网关，将涉及的 CF 分发数量减少 1。