Почему мой запрос API не отправляется при загрузке страницы, кэшированной CloudFront?

Question

У меня есть приложение Angular 7, размещенное в корзине S3, которая отправляет запросы API на серверную часть Elastic Beanstalk.Ведро S3 находится в CloudFront, и я использую Lambda для перехвата запросов на предварительный рендеринг через Prerender.cloud.Когда я загружаю свою страницу (https://contrast.fm/calendar),, первоначальный запрос API для загрузки данных страницы не отправляется.

Это прекрасно работает в моей локальной среде, т.е. отправляется первоначальный запрос к конечной точке моего календаря.Также отлично работает, когда я загружаю сайт через URL-адрес корзины. Я заметил, что если я аннулирую * в CloudFront, запрос успешно отправляется при загрузке страницы. Но любое последующее обновление страницы не приводит к отправке запросов.

Поэтому я считаю, что у меня есть фундаментальное недопонимание того, как должен работать мой сайт в отношении CloudFront. Разве не следует отправлять HTTP-запросы, сделанные приложением при инициализации, независимо от того, кэширована ли страница?

Answer 1

Получил это исправлено!Проблема была связана с prerender.cloud.Prerender.cloud внедряет патч обезьяны, который кэширует AJAX-запросы.

Чтобы решить, вы можете поместить prerendercloud.set('disableAjaxPreload', true) в handler.js, если выс помощью библиотеки prerender.cloud CloudFront + Lambda @ Edge.Тем не менее, это не идеально, потому что это приведет к мерцанию экрана, поскольку устаревшие кэшированные данные исчезнут, а новые данные из запросов AJAX заменят их при загрузке.

Вы также можете установить window.__PRELOADED_STATE_PLAIN__.Это полностью отключает патч обезьяны и хорошо документировано здесь: https://www.prerender.cloud/docs/server-client-transition/state