0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2021-07-23

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

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

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

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

スクリーンショット 2021-07-23 14.02.59.png

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

image.png

image.png

3. 以下を入力して保存

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

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?