【Firebase Storage】データ取得時に発生するCORSエラーの対応

背景・経緯

• バックエンドでFirebaseを使っていて、画像をStorageで管理している。
• 画像ダウンロード機能を実装→テストしているときに発生。

発生している問題

画像をダウンロードしようとしたら、なぜか画像ダウンロードができない。

コンソールを確認してみると、以下のエラーが吐かれていた。

• エラー内容

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/***.jpeg' from origin 'https://online.gli-english.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• 日本語訳

オリジン 'https://***.com' からの 'https://firebasestorage.googleapis.com/v0/b/***.appspot.com/o/groups***.jpeg' における XMLHttpRequest へのアクセスは、CORS ポリシーによってブロックされました。要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。

いくつかわからない単語が出てきているが、まずはこのエラーの解決策から。

解決策

• Cloud Storage バケットに対してCORSを構成し、デプロイする必要がある。
• CORSを構成するやり方は gsutilコマンドラインツールを使って行う。

手順

1. Google Cloud SDKをファイルシステム上の任意の場所にインストールする。
   https://cloud.google.com/storage/docs/gsutil_install?hl=ja#mac

   自分の場合は、/Users/ユーザー名/Projects にインストール。

2. 任意のディレクトリでcors.jsonを作成し、以下の内容を記述する

   [
     {
       "origin": ["*"],
       "method": ["GET"],
       "maxAgeSeconds": 3600
     }
   ]
   

   origin の箇所は、必要があれば該当するHosting URLを入れる。

   URLはFirebase Hostingのコンソール上で確認できる。

3. 2で作成したcors.jsonをデプロイするために以下のコマンドを実行する。

   gsutil cors set cors.json gs://<your-cloud-storage-bucket>
   

   URLはFirebase Storageのコンソール上でで確認できる。

4. デプロイできたか確認するため、以下のコマンドを実行。

   gsutil cors get gs://<your-cloud-storage-bucket>
   

   2で設定したjsonが返ってくればデプロイ成功している。

5. フロント画面で画像ダウンロードができるようになればOK

   より複雑なCORS構成をする場合は、公式ドキュメントに詳細が書かれているみたい。
   https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket

用語

こちらのサイトで大変わかりやすくまとめられていたので、引用させていただきました。

    Access-Control-Allow-Origin: *