1. ホーム
  2. firebase

[解決済み] Firebaseストレージとアクセス制御・許可・オリジン

2022-06-10 09:32:16

質問

Firebase StorageからXMLHttpRequestでファイルをダウンロードしようとしていますが、リソースに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/[EDITED] 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。 リソースに存在しません。オリジン ' http://localhost:3449 へのアクセスは許可されません。 のアクセスは許可されていません。

どのように解決するのですか?

ここから 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#Configuring-CORS-on-a-Bucket .

上記は現在、Firebaseのドキュメントにも記載されている CORS の設定