Firebase Storage und Access-Control-Allow-Origin

86

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.

Blacksad
quelle
1
Nicht genug Wiederholungen für einen Kommentar, aber der obige Weg ist immer noch der richtige.
Ich

Antworten:

172

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 .

Frank van Puffelen
quelle
5
Gibt es eine Möglichkeit, alle Ursprünge zuzulassen, die Access-Control-Allow-Origin ähnlich sind: *?
Dooderson
5
Wie finde ich den genauen Namen meines Firebase-Eimers?
Jim
11
@ user1311069 verwenden Sie einfach "origin": ["*"],anstelle von"origin": ["https://example.com"],
rigdonmr
8
Firebase muss wirklich einen benutzerfreundlichen Weg finden, um dies zu tun. Das Festlegen von Berechtigungen für eine tatsächliche Firebase-Datenbank ist weder annähernd so frustrierend noch das Festlegen von S3-Bucket-Berechtigungen. Starke Präferenz für S3 zu diesem Zeitpunkt.
Matt Jensen
43
Wenn Sie das Dienstprogramm nicht installieren möchten, können Sie unter console.cloud.google.com/home oben rechts auf "Google Cloud Shell aktivieren" klicken. Dadurch wird eine Shell mit bereits installiertem gsutil und Zugriff auf Ihre Firebase-Speicherprojekte geöffnet. (In der Shell habe ich Pico verwendet, um einen gsutil cors set myjson.json gs://projectname.appspot.com
JSON
47

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

Geben Sie hier die Bildbeschreibung ein

JeffD23
quelle
Festgefahren bei Schritt 1. Bitte erläutern Sie "und starten Sie eine Cloud-Terminal-Sitzung". Ich öffne die Konsole und sehe keine Schaltfläche oder einen Link zu "Starten einer Cloud-Terminal-Sitzung"
Fortesl
3
Es ist das Symbol in der oberen rechten Navigation, das aussieht wie>_
JeffD23
Gibt es eine einfache Möglichkeit, die vorhandene cors-Konfiguration bei Bedarf zuerst zur Umkehrung zu ziehen?
David
Ich habe es versucht, aber es hat nicht funktioniert.
user683742
Es hat bei mir
funktioniert
18

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!

Aakash
quelle
Die Webkonsole unter console.cloud.google.com/home gab einen Fehler aus, funktionierte jedoch einwandfrei mit der Google Cloud SDK-Shell.
FiringBlanks
3
... dort das Terminal öffnen und ... Wie öffnen Sie das Terminal? Ich sehe keine "Open Terminal" -Button auf dem Link
Fortesl
Stellen Sie sicher, dass Sie sich in der cloudSubdomain befinden, nicht in der firebase("console.cloud.google.com/home"), und suchen Sie >_oben rechts nach der Symbolschaltfläche .
Chris Villa
1

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"
         ]
      }
  ]
}'
Nimesh Makwana
quelle
0

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

Rolando Niubó
quelle
2
Dies löst das Problem für den unbekannten Benutzer vor Ort nicht wirklich - nur für eine einzelne Maschine.
Elemental
0

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/

Roshnet
quelle