Google Cloud: Access to image has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I deployed a website on Google Cloud via Cloud Run. The site uses Django and Webpack. The resources are automatically loaded to a Google Cloud Storage bucket.

However, when I try to load the website some resources are not loaded correctly:

Access to image at 'https://storage.googleapis.com/<bucket-name>/bcf8ff28514bad926b0c.png' from origin '<URL of my website>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If I try to access the request just by copy-pasting the URL into the browser it works fine (I can see the image).

By looking at the Request Header for the resources that do not load correctly, their Origin is set to the URL of my website, e.g. https://example.com. The resources that do load correctly don't have Origin in the Request Header. Moreover, this issue only appears on Chrome and Safari but not on Firefox. When I inspect the Request Header on Firefox, the origin is actually set to https://storage.googleapis.com/ (instead of https://example.com), which I assume it's the reason why the resources load correctly.

I guess there are two ways to solve the problem, though I don't know what solution should be preferred and how to implement it:

1. Find a way to set the Origin in the Request Header to https://storage.googleapis.com/ on Chrome and Safari.
2. Change the settings of my Google Cloud Storage bucket so that it accepts request from https://example.com.

Answer 1

The solution was following this example. First, create a JSON file with the CORS configurations:

[
    {
      "origin": ["https://example.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

Then run the following command:

gcloud storage buckets update gs://BUCKET_NAME --clear-cors

Thank you to Doug Stevenson for pointing me in the right direction.