Currently, I'm in the process of developing a web application (Angular + Rails) that utilizes CloudFront CDN to serve assets. The application operates through nginx, which is configured correctly to set the "Access-Control-Allow-Origin" header. In addition, CloudFront has been set up to forward this header.
The issue arises when the initial response for an Angular template does not contain the "Access-Control-Allow-Origin" header, but it appears in subsequent responses (after refreshing the page).
For instance, if I clear my browsing history and cache on Chrome and then visit the page, the template file response lacks the "Access-Control-Allow-Origin" header. However, upon refreshing the page, the header is present in the response.
I've observed that if I clear my browsing history and cache while retaining cookies, the functionality remains intact.
A similar behavior is exhibited in Firefox - clearing the history and cache causes the initial response to be missing the header, but subsequent responses include it. When history and cache are cleared without removing cookies, the system continues to function properly, unlike Chrome.
Furthermore, disabling the cache in Firefox's development tools results in the absence of the header in every response.
If you have any insights or suggestions on where I should investigate further, I would greatly appreciate it.
Thank you.