【Cloud Storage for Firebase】〜has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

2490 ワード
CORS Firebase CloudStorage Firestore CORS テキストリンク

クライアントのjavascriptから、Cloud Storage for Firebaseの画像データを扱おうとしたときに、
このようなエラーが出た

〜has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

CORSの説明はたくさんあるので、この回避方法を共有します。

１. GCPコンソールを開き、上部のナビゲーションバーにある>_アイコンボタンをクリックしてクラウドターミナルセッションを開始。

２. 鉛筆アイコンをクリックしてエディターを開き、 cors.jsonファイルを作成します。

３. 以下を入力して保存

cors.json
[
  {
    "origin": ["https://example.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

ここで、　https://example.comを許可したいドメインに変更する。
もしデバッグ時に全てのドメインを許可する場合には"origin": ["*"]のようにすれば良い。
※セキュリティには十分ご注意ください

４. gsutil cors set cors.json gs://your-bucket実行します。（ここに入力するバケットのアドレスは、扱いたい画像が入っているバケットのものを使用すれば良い）

皆様が少しでも苦戦する時間を減らせて、効率的に開発ができるようになればと思います！