I have a domain that hosts a react website in an s3 bucket via cloudfront. There is also a wordpress site hosted on a subdomain of that domain, and in the cloudfront distribution for the web app, I have two behaviors set up with path patterns en and en/* that are set up with the wordpress subdomain as its origin.
This setup seems to work when visiting en/* paths in incognito mode, and in browsers that have never visited the main domain. However, in a browser that has visited the domain before, the browser renders the react app instead of the wordpress page. Doing an empty cache and hard reload causes it to display the wordpress page, but another refresh after that and it's back to rendering the web app. This happens very consistently.
When the react app is rendered at a url that should render the wordpress app, I get the following response header:
x-cache: RefreshHit from cloudfront
Also, while a browser that has never visited the react app will correctly load the wordpress app when visiting a path starting with /en, once that browser has visited the react app, paths starting with /en no longer render the wordpress app
What exactly is going on here? And is there a way to get it to render the wordpress app consistently without users having to completely clear their browser's cache? Is there a way to clear the relevant cache item using javascript so that I can do so from within the react app when it detects it is on one of those paths?
