Firebase Storageからファイルをフェッチする際に発生するCORSエラーの解消方法

事象

Firebase Storageからファイルの取得をfetch関数を使用して試みたが、その際にうまく取得できなかった。

import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    (async () => {
      // Firebase Storageに保存されている画像のダウンロードURLを取得
      const storageRef = ref(storage, 'image.png')
      const downloadUrl = await getDownloadURL(storageRef)

      // fetchして、画像データを取得
      const response = await fetch(downloadUrl)
      const blob = await response.blob()
      const image = new File([blob], 'image.jpg', { type: 'image/jpeg' })
      console.log(`サイズ: ${image.size} bytes`)
    })()
  }, [])
  return (
    <></>
  );
}

発生していたエラーは下記の通り。

Access to fetch at 'https://firebasestorage.googleapis.com/v0/b/xxxxxxxxxx'
from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

ローカル（http://localhost:3000）からFirebase（https://firebasestorage.googleapis.com）に対するリクエストがCORSポリシーによってブロックされたよって。
つまり、コードではなくFirebaseの設定の問題。

解決策

それじゃ、設定を変更しよう！と思ってFirebaseコンソール内を探してもそれらしき項目は見当たらず、、どうやらgsutilツールを使用して設定するのが一般的らしい。面倒。。

step 1

下記からgsutilをインストールして、コマンドを使用できるようにしておく。
https://cloud.google.com/storage/docs/gsutil_install?hl=ja

step 2

設定ファイルを作成する。重要なのは、originにブロックしてほしくないURL（今回で言うところのhttp://localhost:3000）を記載すること。

[
  {
    "origin": ["http://localhost:3000"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

step 3

gsutilコマンドを実行する。「step 2で作成した設定ファイルのパス」と「Google Cloud Storage URI」は適宜設定すること。

gsutil cors set [step 2で作成した設定ファイルのパス] [Google Cloud Storage URI]

Google Cloud Storage URIとは、gs://から始まるパスのことで、具体的にはgs://[FirebaseプロジェクトID].appspot.comである。
ちなみに、実行後は設定が正しく反映されているかを確認できる。

gsutil cors get [Google Cloud Storage URI]

ということで、面倒だったけど無事解決。