How to access GCS Storage from a browser API script (CORS challenge)?

[Martin Falch]

Hi all,

I'm trying to access my GCS storage buckets via a browser script.

Specifically, the browser script is based on the AWS SDK and therefore I've been trying to use the GCS "interoperability" end-point and key/secret-key.

I'm able to connect just fine using e.g. the S3 Browser tool and my details.

However, when trying to do the same from the browser, I seem to run into a CORS challenge that blocks access:

"Access to fetch at 'http://storage.googleapis.com/' from origin 'http://demo.technocube.co' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

How can I change my general GCS CORS settings to allow browser based APIs like the AWS SDK to access my GCS storage?

Thanks a ton!

Martin

[Kuba Bartel]

Hi,

you can set CORS on the bucket level - steps in the docs: https://cloud.google.com/storage/docs/configuring-cors

[Martin Falch]

Hi Kuba,

I did use gsutil to set my CORS on the single bucket I have on my trial Google Cloud server. 

This seems to work as intended, yet I'm still unable to access the server. 

My thought was that this problem might be at a higher level than the bucket, since the tool I'm trying to use aims to initially just list the buckets on the server - yet the error occurs even before I'm able to list the buckets.

I did not have a similar challenge connecting to an AWS test server. In that case, I can list the buckets and if I try to select a bucket with the wrong CORS settings, the bucket doesn't show the content. Still, it seems I'm stuck at an earlier step when trying via Google Cloud.

Any thoughts/tips would be great - I can also send a link to the tool in a PM if helpful.

Martin

[Omair(Cloud Platform Support)]

Hi Martin,

Based on the error message that you are getting I believe your ‘responseHeader’ field is not correctly configured in the CORS configuration. Please go through the troubleshooting steps and see point 5 that closely matches your problem.

If you are still not able to solve the problem then I would suggest that you post your question on StackOverflow using the “cloud-storage” tag with the steps you have taken to troubleshoot your issue as well as the CORS policy you set on your bucket, as your question will get a lot more visibility there.

Hope this helps.