为什么我的API请求无法在CloudFront缓存的页面负载上发送？

Question

我在S3存储桶上托管了一个Angular 7应用程序，该应用程序向Elastic Beanstalk后端发出API请求。 S3存储桶位于CloudFront的前面，我正在使用Lambda拦截通过Prerender.cloud进行预渲染的请求。当我加载页面（https://contrast.fm/calendar）时，未发送初始API请求来加载页面数据。

这在我的本地环境中工作得很好，即发送了对日历端点的初始请求。当我通过存储桶URL加载网站时，效果也很好。我注意到，如果我在CloudFront中使*无效，则请求将在页面加载时成功发送。但是此页面的任何后续刷新都不会导致发送请求。

因此，我相信我对CloudFront的网站应该如何工作有基本的误解。无论页面是否已缓存，应用程序在初始化时都不会发送HTTP请求吗？

Answer 1

解决了这个问题！该问题与prerender.cloud有关。 Prerender.cloud注入了一个猴子补丁，用于缓存AJAX请求。

要解决此问题，如果使用的是prerender.cloud的CloudFront + Lambda @ Edge库，可以将prerendercloud.set('disableAjaxPreload', true)放在handler.js中。但是，这不是理想的，因为它将导致屏幕闪烁，因为陈旧的缓存数据将消失，并且AJAX请求中的新数据将在加载时替换它。

您还可以设置window.__PRELOADED_STATE_PLAIN__。这会完全禁用猴子补丁，并在此处进行了详细记录：https://www.prerender.cloud/docs/server-client-transition/state