Get hands-on experience with 20+ free Google Cloud products and $300 in free credit for new customers.

CORS settings has no effect

I have configured CORS for our storage bucket such that, when reading it back with the gcloud command, I receive:

...
    "cors_config": [
      {
        "maxAgeSeconds": 3600,
        "method": [
          "GET"
        ],
        "origin": [
          "https://redacted.web.app",
          "https://redacted.firebaseapp.com"
        ],
        "responseHeader": [
          "Content-Type"
        ]
      }
    ]
...

And yet, when attempting to access it from the first origin, the CORS headers are not present, and therefore all requests fail.

It was working for awhile, and then it stopped working at some point. I believe incorrect CORS settings were accidentally applied, but I shortly thereafter re-applied correct settings.

I know that, shortly after making changes, it won't work, but that last change I made to the CORS was over a week ago, and it is not taking effect. I have to assume it isn't a waiting thing.

Any ideas?

EDIT:

Ok, if no one can respond, clearly something is plainly broken with GCP. How do I report a bug? Does Google offer anything? Or do I literally have to pay for support just to tell them they screwed up?

EDIT:

Anyone?? I tried reporting an issue to Google. We're hoping to launch soon, and this renders a number of features completely broken. There is no easy work-around for not being able to load any files from buckets within the app due to this pathetic issue.

3 1 288
1 REPLY 1

Ok! I believe we solved this issue. It's a bit confusing; so I'll clarify why I thought it was broken, and why what I tried wasn't reporting correctly.

Initially our cors config had a trailing slash at the end of the origin. I don't think this bode well with our setup. Not sure if having a trailing slash makes the cors header invalid, but it just didn't work:

{
  ...
  "origins": ["https://origin.com/"] // DON'T put a / at the end!
  ...
}

Now, we had recognized this and fixed it, and it appeared to work for a little, but then stopped working again.

When I tested it, I loaded a document via the browser just by visiting it in a new tab. I expected to see the "Access-Control-Allow-Origin" header, but I was not. Therefore, I assumed it was not something we did wrong.

However, when I re-sent the request whilst setting the "Origin" request header to one of our allowed origins (e.g., "origin.com") I immediately started seeing the "Access-Control-Allow-Origin" in the response headers.

Now, finally, the reason it didn't work in the normal case (i.e., from JS fetches on the page with an allowed origin, and not from a new browser tab) was because the code we were using made a preflight request with the "HEAD" method. This was rejected because it was not allowed in our cors config. So, I believe that either changing our preflight requests to use the "GET" method, or adding "HEAD" to our cors config would work.