Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cloud Storage - No 'Access-Control-Allow-Origin' header is present on the requested resource for AngularJS view

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.

like image 853
James Walker Avatar asked Mar 16 '16 21:03

James Walker


People also ask

How do you fix no access-control-allow-Origin header is present on the requested resource?

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.

How to fix CORS error in ionic?

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.

How do I get rid of cross origin error?

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.

Why do we get CORS error?

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.


1 Answers

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

like image 61
Kar Keng Chan Avatar answered Oct 06 '22 00:10

Kar Keng Chan