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

Question

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 s

Answer 1

If cache is the problem, try this.

gsutil setmeta -h "Cache-Control:no-cache" gs://BUCKET_NAME/OBJECT_NAME

Viewing and editing object metadata

Cache may remain somewhere in the network for a while.

Answer 2

In fact, this type of issue can potentially be resolved upon clearing the browser or other intermediary service’s cache.

In case your application is running on a Google App Engine instance, it is possible to clear its intermediate cache by redeploying a new version of the app. Alternatively, it may be also possible to set a default_expiration or simple expiration of files cached within web proxies and browsers (see this Static cache expiration section of the app.yaml reference for more information).

Answer 3

As a summary for people who find this question via Google, applying a CORS policy seems to take a bit of time before it takes effect. Answers above indicate it could be due to intermediate caches, etc -- things that are likely out of your immediate control.

If you can, apply a CORS policy (via gsutil) that allows a wildcard origin and test your request either via https://www.test-cors.org/ or curl --verbose --output /dev/null -H "Origin: https://your.actual.origin.here" https://storage.googleapis.com/bucket/object you will eventually see headers you're looking for:

< access-control-allow-origin: *
< access-control-expose-headers: Content-Length, Date, Server, Transfer-Encoding, X-GUploader-UploadID, X-Google-Trace

Once it works, restrict the origins and methods you're actually using so you don't wind up on the news and/or have a surprisingly large bandwidth bill.

If you've done this and are still having issues, try uploading an object with a new name to the bucket (that is 100% not cached anywhere) to test.

Answer 4

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

Answer 5

The following got it working for me:

[
    {
      "origin": ["https://site-name-here.com"],
      "responseHeader": "*",
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]