web-dev-qa-db-fra.com

Firebase Storage et Access-Control-Allow-Origin

J'essaie de télécharger des fichiers à partir de Firebase Storage via un XMLHttpRequest, mais Access-Control-Allow-Origin n'est pas défini sur la ressource et n'est donc pas possible. Est-il possible de définir cet en-tête sur le serveur de stockage?

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

Message d'erreur Chrome:

XMLHttpRequest ne peut pas charger https://firebasestorage.googleapis.com/ [EDITED] Aucun en-tête 'Accès-Contrôle-Autoriser-Origine' n'est présent sur la ressource demandée. Origin ' http: // localhost: 3449 ' n'est donc pas autorisé à accéder.

firebasecorsgoogle-cloud-storagefirebase-storage
50
Blacksad

De ceci publication sur le groupe/liste de firebase-talk :

Le moyen le plus simple de configurer vos données pour CORS est d'utiliser l'outil de ligne de commande gsutil. Les instructions d'installation pour gsutil sont disponibles à l'adresse https://cloud.google.com/storage/docs/gsutil_install . Une fois que vous avez installé gsutil et authentifié avec, vous pouvez l’utiliser pour configurer CORS.

Par exemple, si vous souhaitez uniquement autoriser le téléchargement d’objets depuis votre domaine personnalisé, placez ces données dans un fichier nommé cors.json (en remplacement de "https://example.com" avec votre domaine):

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

Ensuite, lancez cette commande (en remplaçant "exampleproject.appspot.com" avec le nom de votre seau):

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

et vous devriez être mis.

Si vous avez besoin d’une configuration CORS plus complexe, consultez la documentation à l’adresse https://cloud.google.com/storage/docs/cross-Origin#Configuring-CORS-on-a-Bucket .

101
Frank van Puffelen

Je veux juste ajouter à la réponse. Accédez simplement à votre projet dans la console Google (console.cloud.google.com/home) et sélectionnez votre projet. Là, ouvrez le terminal et créez simplement le fichier cors.json (touch cors.json) puis suivez la réponse et modifiez ce fichier (vim cors.json) comme suggéré par @ frank-van-puffelen

Cela a fonctionné pour moi. À votre santé!

10
Aakash

une autre approche consiste à utiliser l'API Google JSON de Google. étape 1: obtention du jeton d'accès à utiliser avec l'API JSON Pour obtenir un jeton, accédez à: https://developers.google.com/oauthplayground/ Ensuite, recherchez l'API JSON ou le stockage. Sélectionnez les options requises, par exemple, la lecture. , write, full_access (cochez ceux qui sont requis) Suivez le processus pour obtenir le jeton d’accès, qui sera valide pendant une heure. Étape 2: Utilisez un jeton pour accéder à l'API JSON Google afin de mettre à jour CORS

Échantillon 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"
         ]
      }
  ]
}'
0
nimesh makwana