Ich habe eine Domäne, die eine React-Website in einem S3-Bucket über Cloudfront hostet. Es gibt auch eine WordPress-Site, die auf einer Subdomäne dieser Domäne gehostet wird, und in der Cloudfront-Verteilung für die Web-App habe ich zwei Verhaltensweisen mit Pfadmustern eingerichtet en, en/*die mit der WordPress-Subdomäne als Ursprung eingerichtet sind.
Dieses Setup scheint zu funktionieren, wenn en/*Pfade im Inkognito-Modus besucht werden und in Browsern, die die Hauptdomäne noch nie besucht haben. In einem Browser, der die Domäne zuvor besucht hat, rendert der Browser jedoch die React-App anstelle der WordPress-Seite. Wenn Sie den Cache leeren und neu laden, wird die WordPress-Seite angezeigt, aber nach einem weiteren Aktualisieren wird die Web-App wieder gerendert. Dies geschieht sehr regelmäßig.
Wenn die React-App unter einer URL gerendert wird, die die WordPress-App rendern soll, erhalte ich den folgenden Antwortheader:
x-cache: RefreshHit from cloudfront
Auch wenn ein Browser, der die React-App noch nie besucht hat, die WordPress-App korrekt lädt, wenn er einen Pfad besucht, der mit beginnt , rendern Pfade, die mit beginnen, die WordPress-App nicht mehr /en, sobald dieser Browser die React-App besucht hat./en
Was genau ist hier los? Und gibt es eine Möglichkeit, die WordPress-App konsistent darzustellen, ohne dass Benutzer den Cache ihres Browsers vollständig leeren müssen? Gibt es eine Möglichkeit, das relevante Cache-Element mithilfe von JavaScript zu löschen, sodass ich dies innerhalb der React-App tun kann, wenn diese erkennt, dass es sich auf einem dieser Pfade befindet?
Antwort1
Das Problem hatte nichts mit meiner Cloudfront- oder S3-Konfiguration zu tun, sondern lag vielmehr daran, dass der von der React-App gestartete Service Worker alle Anfragen an die Domäne abfing, sobald er gestartet wurde. Das Entfernen des Service Workers (was ich tun konnte, da er nicht mehr benötigt wird) löste das Problem.