Menu
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.
772
To allow any site to make CORS requests without using the * wildcard (for example, to enable credentials), your server must read the value of the request's Origin header and use that value to set Access-Control-Allow-Origin , and must also set a Vary: Origin header to indicate that some headers are being set ...
In that case you can change the security policy in your Google Chrome browser to allow Access-Control-Allow-Origin. This is very simple: Create a Chrome browser shortcut. Right click short cut icon -> Properties -> Shortcut -> Target.
Open a network tab in your console. In the response header look for the Access-Control-Allow-Origin header. If it does not exist then add it as a middleware in the way we discussed above. If it does exist then make sure there is no URL mismatch with the website.
What is the Access-Control-Allow-Origin response header? The Access-Control-Allow-Origin header is included in the response from one website to a request originating from another website, and identifies the permitted origin of the request.
"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
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
