Setting the bucket CORS header

Some read operations require the web client's domain to be whitelisted, through a bucket-side CORS header.

read operations that require a CORS whitelist

Browser reads relying on background fetch rather than navigating to the URL require a CORS whitelist:

  • getBlob(fileRef) to get a Blob, which uses fetch() under the hood.
  • getBytes(fileRef) to get an ArrayBuffer, which uses fetch() under the hood.
  • using fetch() manually with a bearer (tokenized) URL.

white-listing the domain

We add authorized domains to cors.json and send it to Google through the CLI:

cors.json

[
    {
        "origin": ["https://imagetales.io", "http://localhost:5173"],
        "method": ["GET"],
        "maxAgeSeconds": 3600
    }
]

Register cors.json:

gcloud storage buckets update gs://abc.firebasestorage.app --cors-file=cors.json

For debugging, we can get a description of the existing bucket CORS config:

gcloud storage buckets describe gs://abc.firebasestorage.app --format="default(cors_config)"
earlymorning logo

Setting the bucket CORS header

Some read operations require the web client's domain to be whitelisted, through a bucket-side CORS header.

read operations that require a CORS whitelist

Browser reads relying on background fetch rather than navigating to the URL require a CORS whitelist:

  • getBlob(fileRef) to get a Blob, which uses fetch() under the hood.
  • getBytes(fileRef) to get an ArrayBuffer, which uses fetch() under the hood.
  • using fetch() manually with a bearer (tokenized) URL.

white-listing the domain

We add authorized domains to cors.json and send it to Google through the CLI:

cors.json

[
    {
        "origin": ["https://imagetales.io", "http://localhost:5173"],
        "method": ["GET"],
        "maxAgeSeconds": 3600
    }
]

Register cors.json:

gcloud storage buckets update gs://abc.firebasestorage.app --cors-file=cors.json

For debugging, we can get a description of the existing bucket CORS config:

gcloud storage buckets describe gs://abc.firebasestorage.app --format="default(cors_config)"