CORS allow origin error

[Chris Dawson]

I believe I have done everything correctly to set a CORS header for images stored in firebase storage but I'm getting an error when I attempt to access it with my code.

My cors.json file looks like this:

[
{
"origin": [
"http://localhost:9090", "https://xrd.github.com"
],
"responseHeader": [
"Content-Type"
],
"method": [
"GET",
"HEAD",
"DELETE"
],
"maxAgeSeconds": 3600
}
]

I ran this command:

$ gsutil cors set cors.json gs://yumejs-42402.appspot.com

Can I validate things work properly with a cURL command? I should see the header in any request right?

$ curl -Is 'https://firebasestorage.googleapis.com/v0/b/yumejs-42402.appspot.com/o/images%2FT7inLHFI8CPZNFYB9LMla2rkKHh1%2F1.jpg?alt=media&token=3174a842-42fd-4155-8948-1f07f8ba10b6' | grep Access | grep Origin

Access-Control-Allow-Origin: *

This means it is not correct, right? This seems like it would permit all requests...

Can I review the CORS settings inside the Firebase web console (or in cloud.google.com)?

This link documents the issue (you'll need to look at the JS console)

https://xrd.github.io/yume.js/player.html?comic=W3sibW9kZWxzIjpbeyJuYW1lIjoiaHR0cHM6Ly9maXJlYmFzZXN0b3JhZ2UuZ29vZ2xlYXBpcy5jb20vdjAvYi95dW1lanMtNDI0MDIuYXBwc3BvdC5jb20vby9pbWFnZXMlMkZUN2luTEhGSThDUFpORllCOUxNbGEycmtLSGgxJTJGMS5qcGc/YWx0PW1lZGlhJnRva2VuPTMxNzRhODQyLTQyZmQtNDE1NS04OTQ4LTFmMDdmOGJhMTBiNiIsInR5cGUiOiJpbWFnZSJ9XSwiZHVyYXRpb24iOjUsImV4cGFuZGVkIjp0cnVlLCIkJGhhc2hLZXkiOiJvYmplY3Q6NiJ9XQ==

The error is:

player.html?comic=W3sibW9kZWxzIjpbeyJuYW1lIjoiaHR0cHM6Ly9maXJlYmFzZXN0b3JhZ2UuZ29vZ2xlYXBpcy5jb20vd…:1 Access to Image at 'https://firebasestorage.googleapis.com/v0/b/yumejs-42402.appspot.com/o/imag…B9LMla2rkKHh1%2F1.jpg?alt=media&token=3174a842-42fd-4155-8948-1f07f8ba10b6' from origin 'https://firebasestorage.googleapis.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xrd.github.io' is therefore not allowed access.

[Spencer Phippen]

Hey Chris,

Looks like your cors.json file contains "https://xrd.github.com" instead of "https://xrd.github.io", where the content is actually hosted. That seems like the problem?

If I curl the download URL with the "Origin: https://xrd.github.com" header, the response contains "Access-Control-Allow-Origin: https://xrd.github.com" as expected.

Also, the response for the HEAD request does contain a "Access-Control-Allow-Origin: *" header, but if you look at the full response you'll see it's actually a 400 error (shh, don't tell anyone HEAD doesn't work :P).

Thanks,

Spencer P

[Chris Dawson]

Thanks, that worked like a charm!