Firebase Storage et Access-Control-Allow-Origin

Question

J'essaie de télécharger des fichiers à partir de Firebase Storage par le biais d'une requête XMLHttp, mais Access-Control-Allow-Origin n'est pas défini sur la ressource, donc ce n'est pas possible. Existe-t-il un moyen 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 de Chrome :

XMLHttpRequest ne peut pas être chargé https://firebasestorage.googleapis.com/ [ÉDITION] L'en-tête "Access-Control-Allow-Origin" n'est pas présent dans le message demandé. demandée. Origine ' http://localhost:3449 n'est donc pas autorisé accès.

Answer 1

De ce post sur le groupe/liste firebase-talk :

La façon la plus simple de configurer vos données pour CORS est avec la fonction gsutil outil de ligne de commande. Les instructions d'installation de gsutil sont disponibles à l'adresse suivante https://cloud.google.com/storage/docs/gsutil_install . Une fois que vous avez installé gsutil et authentifié avec elle, vous pouvez l'utiliser pour configurer CORS.

Par exemple, si vous voulez simplement autoriser le téléchargement d'objets à partir de votre domaine personnalisé, placez ces données dans un fichier nommé cors.json (en remplaçant "https://example.com" avec votre domaine) :

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

Ensuite, exécutez 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 prêt.

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

Answer 2

Google Cloud dispose désormais d'un éditeur en ligne pour faciliter ce processus. Il n'est pas nécessaire d'installer quoi que ce soit sur votre système local.

1. Abra el Console GCP et lancez une session de terminal en nuage en cliquant sur le bouton >_ dans la barre de navigation supérieure.
2. Cliquez sur l'icône en forme de crayon pour ouvrir l'éditeur, puis créez l'élément suivant cors.json fichier.
3. Ejecutar gsutil cors set cors.json gs://your-bucket

Answer 3

Je veux juste ajouter à la réponse. Il suffit d'aller sur votre projet dans la console google (console.cloud.google.com/home) et de sélectionner 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 marché pour moi. A la vôtre !

Answer 4

Une autre approche consiste à utiliser l'API JSON de Google. étape 1 : obtenir un jeton d'accès à utiliser avec l'API JSON Pour obtenir un jeton d'accès, allez sur : https://developers.google.com/oauthplayground/ Ensuite, recherchez l'API JSON ou le stockage Sélectionnez les options requises, c'est-à-dire lecture, écriture, accès complet (cochez celles qui sont requises). Suivez le processus pour obtenir un jeton d'accès, qui sera valide pendant une heure. Étape 2 : Utilisez le jeton pour accéder à l'API JSON de Google afin de mettre à jour CORS.

Boucle d'échantillon :

    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"
         ]
      }
  ]
}'

Answer 5

Pour accéder à n'importe quelle ressource à laquelle un en-tête CORS est appliqué, vous pouvez utiliser un petit projet que j'ai réalisé en Golang pour moi-même. https://proxify-cors.herokuapp.com/