CORS set but not effecting the request

Question

I am trying to create a head request on a link generated using Firebase Functions using getSignedURL method.

I want to check if the URL is still alive and is not expired for that I am

And for cors I used gsutils from cloud shell on cloud.google.com and setup the cors:

gsutil cors set cors.json gs://mybucket.appspot.com
Setting CORS on gs://mybucket.appspot.com/...
di@cloudshell:~ (ecutter-web)$ gsutil cors get gs://mybucket.appspot.com
[{"maxAgeSeconds": 300, "method": ["HEAD"], "origin": ["https://myapp.web.app"],         
"responseHeader": ["Access-Control-Allow-Origin"]}]

but when I make a head request to that URL it shows error :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://storage.googleapis.com/myapp.appspot.com/public/myfile.doc?GoogleAccessId=firebase-adminsdk-7u2d7%40myapp.iam.gserviceaccount.com&Expires=1603783901&Signature=... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

this is the cors.json:

[
    {
      "origin": ["https://myapp.web.app"],
      "method": ["HEAD"],
      "responseHeader": ["Access-Control-Allow-Origin"],
      "maxAgeSeconds": 300
    }
]

original appname is replaced with myapp.

and function to check the validity :

function loadhandle() {
        console.log('logging');
        console.log(this.responseText);
    }
    function checkUrl(s) {
        console.log('creating request');
        var xml = new XMLHttpRequest();
        xml.addEventListener("load", loadhandle, false);
        xml.open("HEAD", s);
        xml.send();
    }

Where is the problem?

user_14526564 · Answer

I was setting the CORS at afternoon so my connection was not that fast and i found that cloud shell was struggling to get up and running.

So

You can set CORS on getSignedUrl using gsutils and i used Cloud shell from console.cloud.google.com to avoid any installation.

in cloud shell first check for if any CORS configuration is present by running command:

 gsutil cors get gs://yourstoragebucketname

then upload your CORS file using upload file menu item. in my case file name was cors.json

 gsutil cors set cors.json gs://yourstoragebucketname

Verify if CORS is set correctly by calling again

 gsutil cors get gs://yourstoragebucketname

Your cors.json should look like this:

[
   {
      "origin":[
         "https://myapp.web.app",
         "http://localhost:5000"
      ],
      "method":[
         "HEAD"
      ],
      "responseHeader":[
         "Access-Control-Allow-Origin"
      ],
      "maxAgeSeconds":300
   }
]

user_11928130 · Answer

From Google documentation:

The authenticated browser download endpoint storage.cloud.google.com does not allow CORS requests. Note that the Cloud Console provides this endpoint for each object's public URL link.

You can use either of the following XML API request URLs to obtain a response from Cloud Storage that contains the CORS headers:

storage.googleapis.com/BUCKET_NAME

or

BUCKET_NAME.storage.googleapis.com

Looking at the error you encountered:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 
https://storage.googleapis.com/...(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Reference

Let me know if this works for you.

user_8240239 · Answer

I dont know if this help but if I use your code with GET method instead of HEAD to check and it works.

I also used useEffect, and dont you fetch because CORS only affect to XMLrequest.

Finally, I configed using Anaconda Prompt with a command like this:

gsutil cors set C:/Users/Admin/Desktop/cors_config.json gs://BUCKET_NAME

CORS set but not effecting the request

3 Answers