Cloud Run Cloud Storage Cors Font Issue

Question

Fonts nor Icons / Images are not loading on my website, when using google cloud storage as a CDN. On Production in Cloud Run, it seems as though any

font

.img

thats called from within

.css

Hosted in cloud storage, will have a CORS issue when the page loads.

ISSUE: CORS Access-Control-Allow-Origin is missing...

I've already figured out the issue, I'm just posting this in case anyone else runs into a similar problem.

Answer 1

You will need to set CORS permissions on your cloud storage bucket, first create a json file show here: https://cloud.google.com/storage/docs/configuring-cors, follow the instructions, on how to set and get the permissions once you create the file. This will allow you to then, access the fonts / images from your css files in cloud storage. TIP: set the proper response headers in the config:

Example:

[{"maxAgeSeconds": 3600, "method": ["GET"], "origin": ["*"], "responseHeader": ["*,Accept,Content-Type"]}]

I found that responseHeader is the one that causes the most confusion, you will need to make sure that at least one of the request headers that your file is sending, has been listed in responseHeader, you can add multiple separated by a comma

PLEASE NOTE

* does not work for all in production, but is instead listed as an actual header!! So make sure you list at least one of the request headers sent in that responseHeader