angular - 未在 Cloudfront 错误页面上调用 Lambda@Edge 函数

Question

我有一个 Angular 应用程序的静态文件通过 Cloudfront 在 S3 存储桶上提供。我的 Cloudfront 发行版设置了错误页面，因此它仍然呈现 Angular 的 index.html。这意味着如果我请求 <cloudfront-distribution>.cloudfront.net/home-page ，而不是说它没有找到名为 home-page 的文件在 S3 存储桶上，它仍将呈现 angular 应用程序，而 angular 应用程序将处理该 /home-page路线。
我需要在应用程序服务器上包含一些安全 header ，因此我设置了一个 Lambda@Edge 函数以将这些 header 注入(inject)查看器响应事件(如 https://aws.amazon.com/blogs/networking-and-content-delivery/adding-http-security-headers-using-lambdaedge-and-amazon-cloudfront/ 中所述)。
Lambda@Edge 正在处理实际上对应于 S3 存储桶中的文件的路由(如果我在 S3 存储桶的根文件夹中有一个名为 image.png 的文件，并且我请求 <cloudfront-distribution>.cloudfront.net/image.png ，我会看到响应 header 我通过 Lambda@Edge 函数注入(inject)。问题是在访问与 S3 存储桶中的文件不对应的路由时。如果我访问 <cloudfront-distribution>.cloudfront.net/home-page，S3 将返回 404，Cloudfront 将处理 404 并采取相应措施到错误页面配置，即以 200 状态代码响应并呈现 index.html 文件。当发生这种情况时，我看不到任何通过 Lambda@Edge 函数注入(inject)的 header ，而所有其他脚本我的 Angular 应用程序的文件有标题。
如何让所有响应都通过 Lambda@Edge 函数？

Answer 1

我刚刚经历了完全相同的情况。我发现 AWS 文档中的这个页面最有帮助:https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-cloudfront-trigger-events.html
虽然 the current这个问题的答案绝对正确，我还有另一个限制可能有助于讨论:

CloudFront 函数仅针对查看器请求/响应事件触发；与可由 Origin 或 Viewer 事件触发的 Lambda@Edge 函数相反。就我而言，我想继续使用 CloudFront 功能，因为它们更轻/更快/更便宜。

正如您所观察到的(并在 the docs 中调用)，当源处出现错误时，不会触发查看器响应事件 - 包括当自定义错误页面作为 200 返回时。
选项 #1 - 切换到源请求事件
如果您已经在使用 Lambda@Edge 并且不想更改任何内容，这可能是最简单的更改。

请记住，这发生在 CloudFront 中的任何缓存之前，因此不会再次调用缓存命中。所以可能不适用于所有用例。

但是，这也可能是一件好事，因为它的 lambda 执行次数较少，并且 header 应包含在缓存中。

选项 #2 - 停止使用自定义错误响应
对我来说，我走这条路。我需要为 Viewer Request 事件创建第二个函数，该函数重写任何不是专门针对 s3 资源的请求，以便 React Router 路径返回我的 index.html。 (类似这样: https://stackoverflow.com/a/60012469/4413888 )。最后，删除了我在 CloudFront 中现有的自定义错误响应。

是的，这是对每个资源请求执行的另一个函数，但在 about 1/6 the cost lambda@edge 调用(免费套餐之后)，我想我仍然领先。

从 s3 中发现实际 403/404 的好处——比如当用户尝试加载旧的 webpack 块和死链接时