Firebase Storage und Access-Control-Allow-Origin

Ich versuche, Dateien von Firebase Storage über eine XMLHttpRequest herunterzuladen, aber Access-Control-Allow-Origin ist für die Ressource nicht festgelegt, daher ist dies nicht möglich. Gibt es eine Möglichkeit, diesen Header auf dem Speicherserver festzulegen?

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

Chrome-Fehlermeldung:

XMLHttpRequest kann https://firebasestorage.googleapis.com/[EDITED nicht laden. ] In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin ' http: // localhost: 3449 ' ist daher kein Zugriff gestattet.

Aus diesem Beitrag auf der Firebase-Talk-Gruppe / Liste :

Der einfachste Weg, Ihre Daten für CORS zu konfigurieren, ist das gsutilBefehlszeilentool. Die Installationsanweisungen für gsutilfinden Sie unter https://cloud.google.com/storage/docs/gsutil_install . Sobald Sie es installiert gsutilund authentifiziert haben, können Sie es zum Konfigurieren von CORS verwenden.

Wenn Sie beispielsweise nur das Herunterladen von Objekten aus Ihrer benutzerdefinierten Domäne zulassen möchten, fügen Sie diese Daten in eine Datei mit dem Namen cors.json ein (ersetzen Sie sie "https://example.com"durch Ihre Domäne):

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

Führen Sie dann diesen Befehl aus (ersetzen Sie ihn "exampleproject.appspot.com"durch den Namen Ihres Buckets):

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

und du solltest eingestellt sein.

Wenn Sie eine kompliziertere CORS-Konfiguration benötigen, lesen Sie die Dokumente unter https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket .

Google Cloud verfügt jetzt über einen Inline-Editor, der diesen Vorgang noch einfacher macht. Sie müssen nichts auf Ihrem lokalen System installieren.

1. Öffnen Sie die GCP-Konsole und starten Sie eine Cloud-Terminalsitzung, indem Sie >_auf die Symbolschaltfläche in der oberen Navigationsleiste klicken.
2. Klicken Sie auf das Stiftsymbol, um den Editor zu öffnen, und erstellen Sie die cors.jsonDatei.
3. Lauf gsutil cors set cors.json gs://your-bucket

Ich möchte nur die Antwort ergänzen. Gehen Sie einfach in der Google-Konsole (console.cloud.google.com/home) zu Ihrem Projekt und wählen Sie Ihr Projekt aus. Öffnen Sie dort das Terminal und erstellen Sie einfach die Datei cors.json ( touch cors.json). Folgen Sie dann der Antwort und bearbeiten Sie diese Datei ( vim cors.json) wie von @ frank-van-puffelen vorgeschlagen

Das hat bei mir funktioniert. Prost!

Ein anderer Ansatz hierfür ist die Verwendung der Google JSON-API. Schritt 1: Zugriffstoken zur Verwendung mit der JSON-API abrufen Um eine Tokenverwendung zu erhalten, gehen Sie zu: https://developers.google.com/oauthplayground/ abrufen Suchen Sie dann nach der JSON-API oder dem Speicher. Wählen Sie die erforderlichen Optionen aus, z. B. Lesen, Schreiben, vollständiger Zugriff (kreuzen Sie diese an) die erforderlich sind) Befolgen Sie die Anweisungen, um das Zugriffstoken zu erhalten, das eine Stunde lang gültig ist. Schritt 2: Verwenden Sie das Token, um auf die Google JSON-API zu klicken und CORS zu aktualisieren

Sample Curl:

    curl -X PATCH \
  'https://www.googleapis.com/storage/v1/b/your_bucket_id?fields=cors' \
  -H 'Accept: application/json' \
  -H 'Accept-Encoding: gzip, deflate' \
  -H 'Authorization: Bearer ya29.GltIB3rTqQ2tJgh0cMj1SEa1UgQNJnTMXUjMlMIRGG-mBCbiUO0wqdDuEpnPD6cbkcr1CuLItuhaNCTJYhv2ZKjK7yqyIHNgkCBup-T8Z1B1RiBrCgcgliHOGFDz' \
  -H 'Content-Type: application/json' \
  -H 'Postman-Token: d19f29ed-2e80-4c34-85ee-c46c9058fac0' \
  -H 'cache-control: no-cache' \
  -d '{
  "location": "us",
  "storageClass": "Standard",
  "cors": [
      {
          "maxAgeSeconds": "360000000",
          "method": [
             "GET",
             "HEAD",
             "DELETE"
          ],
          "origin": [
             "*"
          ],
          "responseHeader":[
            "Content-Type"
         ]
      }
  ]
}'

Ich möchte für diejenigen hinzufügen, die dringend eine Lösung brauchen, wie ich es war, nachdem ich all dies versucht habe und das Problem nicht gelöst habe. Ich habe online einen großartigen Artikel gefunden, der 3 Lösungen bietet, und der erste hat für mich funktioniert. Ein Google Chrome-Plugin. Ja!

moesif CORS-Erweiterung Stellen Sie nach der Installation sicher, dass Sie sie einschalten

Um auf eine Ressource mit einem angewendeten CORS-Header zuzugreifen, können Sie ein kleines Projekt verwenden, das ich in Golang für mich selbst erstellt habe - https://proxify-cors.herokuapp.com/