Access-Control-Allow-Origin missing on the first response

Question

I'm working on a web application (Angular + Rails) that server assets through CloudFront CDN. The application is served though nginx that's correctly set up to set "Access-Control-Allow-Origin" header. CloudFront is set up to forward the header.

Problem is that the header is missing on the first response for an Angular template, but it's correctly present on subsequent responses (if I refresh the page).

For example, if I clear all history and cache in Chrome and visit the page, the response for a template file will not have "Access-Control-Allow-Origin" header. If I refresh the page, the response for the template will have the header.

I noticed that if I clear all history and cache, but not cookies, it continues to work correctly.

It behaves similar on Firefox. If I clear all history and cache it doesn't work on the first response, but it works correctly on subsequent responses. After clearing all history and cache but without cookies, it continues to work correctly, unlike on Chrome.

Also, if I open development tools and disable cache in Firefox, the header is missing on every response.

Do you know what the problem might be or where should I look next?

Thanks.

Answer 1

"Access-Control-Allow-Origin" is a response header, not a request header. It is returned by a HTTP server when a HTTP client sends a request with an OPTION method. For example, the ajax API in browsers sends an OPTION request before trying a POST request when the targeted URL is not the current page URL (see Cross Origin Resource Sharing issue). This OPTION request contains the "Origin" header which holds the current page beginning of URL (scheme + domain). The Ajax API will send the POST request only if the response contains the header "Access-Control-Allow-Origin" with a URL matching the main page one.

You only need to worry about such headers if you want to access dynamic content from another server than the one serving the current page. It doesn't seem to be your case here.

For more information about CORS, see this wikipedia page: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing