According to Chrome dev tools, my requests to get my html partials have the origin header https://site-name-here.com and request header GET.
I have the following JSON file set to my bucket:
[
{
"origin": ["https://site-name-here.com"],
"responseHeader": ["content-type"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
However, whenever angular tries to get the view, I get the following error: XMLHttpRequest cannot load https://storage.googleapis.com/bucket-name/view-path.html?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://site-name-here.com' is therefore not allowed access.
I am also serving javascript and css files from Cloud Storage, but they're working fine, I assume because CSS doesn't have CORS restrictions and I'm using $sceDelegateProvider.resourceUrlWhitelist() in Angular for the scripts?
Edit: Working now, I'm assuming something was cached and it was serving me an old version.
There Are Two Approaches to Getting It Right.Use a reverse proxy server or WSGI server(such as Nginx or Apache) to proxy requests to your resource and handle the OPTIONS method in the proxy. Add support for handling the OPTIONS method in the resource's code.
The correct and easiest solution is to enable CORS by returning the right response headers from the web server or backend and responding to preflight requests, as it allows to keep using XMLHttpRequest , fetch , or abstractions like HttpClient in Angular.
To get rid of a CORS error, you can download a browser extension like CORS Unblock ↗. The extension appends Access-Control-Allow-Origin: * to every HTTP response when it is enabled. It can also add custom Access-Control-Allow-Origin and Access-Control-Allow-Methods headers to the responses.
If the CORS configuration isn't setup correctly, the browser console will present an error like "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite" indicating that the request was blocked due to violating the CORS security rules.
Just to support @Idcmp's answer, the CORS policy does take a while before taking full effect (this is not documented tho). I've spent ~2 hours trying to figure out why I'm still getting CORS error in browser even though I use the below policy (which is highly NOT recommended, but it's fine for my personal testing project).
{
"cors": [
{
"origin": [
"*"
],
"method": [
"*"
],
"responseHeader": [
"*"
],
"maxAgeSeconds": 3600
}
]
}
ps Take a coffee break after applying a new CORS policy, you definitely deserve it
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