私は、CloudFront 経由で S3 バケットに React Web サイトをホストするドメインを持っています。また、そのドメインのサブドメインでホストされている WordPress サイトもあり、Web アプリの CloudFront ディストリビューションには、パス パターンで設定された 2 つの動作がありen、en/*これらは WordPress サブドメインをオリジンとして設定されています。
この設定は、en/*シークレット モードでパスにアクセスした場合や、メイン ドメインにアクセスしたことがないブラウザーでは機能するようです。ただし、以前にドメインにアクセスしたことのあるブラウザーでは、ブラウザーは WordPress ページではなく React アプリをレンダリングします。キャッシュを空にしてハード リロードすると WordPress ページが表示されますが、その後もう一度更新すると、Web アプリのレンダリングに戻ります。これは非常に一貫して発生します。
React アプリが、WordPress アプリをレンダリングする URL でレンダリングされると、次の応答ヘッダーが返されます。
x-cache: RefreshHit from cloudfront
また、Reactアプリにアクセスしたことのないブラウザは、で始まるパスにアクセスするとWordPressアプリを正しく読み込みますが/en、ブラウザがReactアプリにアクセスすると、で始まるパスは/enWordPressアプリをレンダリングしなくなります。
ここでは一体何が起こっているのでしょうか? また、ユーザーがブラウザのキャッシュを完全にクリアしなくても、WordPress アプリを一貫してレンダリングする方法はありますか? 関連するキャッシュ項目を JavaScript を使用してクリアし、React アプリがそれらのパスの 1 つにあることを検出したときに、React アプリ内からクリアする方法はありますか?
答え1
この問題は、私の CloudFront や S3 の設定とは無関係であることが判明しました。React アプリによって起動されたサービス ワーカーが、起動後にドメインへのすべてのリクエストを傍受することが原因でした。サービス ワーカーを削除すると (不要になったため削除できました)、問題は解決しました。