Zenn
🔥

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

2022/04/27に公開1件
Firebase
Firestore
tech

背景・経緯

  • バックエンドで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

用語

こちらのサイトで大変わかりやすくまとめられていたので、引用させていただきました。
https://qiita.com/att55/items/2154a8aad8bf1409db2b#オリジンとは

XMLHttpRequest

  • サーバーと対話するために使用される。
  • Ajax (非同期通信) に使われる組み込みオブジェクトのこと。
  • ページ全体の更新なしで、ユーザーの作業を中断させることなく一部のみを非同期に更新することができる。

CORS policy

  • Cross-Origin Resource Sharing （オリジン間リソース共有）
  • あるオリジンで動いている Web アプリケーションに対して、別のオリジンのサーバーへのアクセスをオリジン間 HTTP リクエストによって許可できる仕組み

オリジン

こちらのサイトでわかりやすく記載があります。引用させていただきました。

Access-Control-Allow-Originヘッダー

  • httpヘッダーのパラメーター
  • 指定されたオリジンからのリクエストを行うコードでレスポンスが共有できるかどうかを示します。
    Access-Control-Allow-Origin: *
  • ワイルドカードを指定すると、すべてのオリジンに対して許可することができる

参考サイト

https://firebase.google.com/docs/storage/web/download-files?hl=ja
https://qiita.com/niusounds/items/383a780d46ee8551e98c
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
https://qiita.com/sirone/items/412b2a171dccb11e1bb6

Discussion