☰

Firebase Storage と Access-Control-Allow-Origin 質問する

tag-icon • tag-icon firebase cors google-cloud-storage firebase-storage
Firebase Storage と Access-Control-Allow-Origin 質問する

XMLHttpRequest を介して Firebase Storage からファイルをダウンロードしようとしていますが、リソースに Access-Control-Allow-Origin が設定されていないため、ダウンロードできません。ストレージ サーバーでこのヘッダーを設定する方法はありますか?

  (let [xhr (js/XMLHttpRequest.)]
    (.open xhr "GET" url)
    (aset xhr "responseType" "arraybuffer")
    (aset xhr "onload" #(js/console.log "bin" (.-response xhr)))
    (.send xhr)))

Chrome エラー メッセージ:

XMLHttpRequest を読み込めませんhttps://firebasestorage.googleapis.com/[編集済み]要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。Origin 'http://ローカルホスト:3449したがって、アクセスは許可されません。

ベストアンサー1

これからfirebase-talk グループ/リストに投稿する:

CORS用にデータを設定する最も簡単な方法は、gsutilコマンドラインツールを使用することです。インストール手順はgsutil以下から入手できます。https://cloud.google.com/storage/docs/gsutil_installインストールしgsutilて認証したら、それを使用して CORS を構成できます。

たとえば、カスタム ドメインからのオブジェクトのダウンロードのみを許可する場合は、次のデータを cors.json ("https://example.com"ドメインに置き換えます) という名前のファイルに格納します。

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

次に、次のコマンドを実行します ("exampleproject.appspot.com"バケットの名前に置き換えます)。

gsutil cors set cors.json gs://exampleproject.appspot.com

これで準備完了です。

より複雑なCORS設定が必要な場合は、次のドキュメントを参照してください。https://cloud.google.com/storage/docs/cross-origin#バケット上の CORS の設定。

上記はFirebaseのドキュメントにも記載されています。CORS 構成

おすすめ記事