Firebase Storage y Access-Control-Allow-Origin


86

Estoy intentando descargar archivos de Firebase Storage a través de XMLHttpRequest, pero Access-Control-Allow-Origin no está configurado en el recurso, por lo que no es posible. ¿Hay alguna forma de configurar este encabezado en el servidor de almacenamiento?

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

Mensaje de error de Chrome:

XMLHttpRequest no puede cargar https://firebasestorage.googleapis.com/[EDITED] No hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen ' http: // localhost: 3449 '.


1
No hay suficiente representante para un comentario, pero la forma anterior sigue siendo la correcta. Solo quería compartir los documentos oficiales de firebase sobre este: firebase.google.com/docs/storage/web/…
Andrew McOlash

Respuestas:


172

De esta publicación en el grupo / lista de firebase-talk :

La forma más sencilla de configurar sus datos para CORS es con la gsutilherramienta de línea de comandos. Las instrucciones de instalación para gsutilestán disponibles en https://cloud.google.com/storage/docs/gsutil_install . Una vez que lo haya instalado gsutily autenticado, puede usarlo para configurar CORS.

Por ejemplo, si solo desea permitir descargas de objetos desde su dominio personalizado, coloque estos datos en un archivo llamado cors.json (reemplazándolo "https://example.com"por su dominio):

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

Luego, ejecute este comando (reemplazándolo "exampleproject.appspot.com"con el nombre de su depósito):

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

y debería estar listo.

Si necesita una configuración CORS más complicada, consulte los documentos en https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket .


5
¿Hay alguna forma de permitir todos los orígenes similares a Access-Control-Allow-Origin: *?
Dooderson

5
¿Cómo puedo encontrar el nombre exacto de mi depósito de base de fuego?
Jim

11
@ user1311069 solo use en "origin": ["*"],lugar de"origin": ["https://example.com"],
rigdonmr

8
Firebase realmente necesita encontrar una forma fácil de usar para hacer esto. Establecer permisos en una base de datos de Firebase real no es tan frustrante ni tampoco lo es establecer permisos de depósito de S3. Fuerte preferencia por S3 en este momento.
Matt Jensen

43
Si no desea instalar la utilidad, una forma práctica es ir a console.cloud.google.com/home y hacer clic en "Activar Google Cloud Shell" en la parte superior derecha. Esto abrirá un shell con gsutil ya instalado y con acceso a sus proyectos de almacenamiento de base de fuego. (en el shell usé pico para crear un json, luego hice lo gsutil cors set myjson.json gs://projectname.appspot.commencionado anteriormente)
Eindbaas

47

Google Cloud ahora tiene un editor en línea para facilitar aún más este proceso. No es necesario instalar nada en su sistema local.

  1. Abra la consola de GCP e inicie una sesión de terminal en la nube haciendo clic en el >_botón de icono en la barra de navegación superior.
  2. Haga clic en el icono de lápiz para abrir el editor y luego cree el cors.jsonarchivo.
  3. correr gsutil cors set cors.json gs://your-bucket

ingrese la descripción de la imagen aquí


Atascado en el paso 1. Por favor, explique "e inicie una sesión de terminal en la nube". Abro la consola y no veo ningún botón o enlace para "iniciar una sesión de terminal en la nube"
fortesl

3
Es el ícono en la parte superior derecha de navegación que parece>_
JeffD23

¿Existe una forma sencilla de extraer la configuración de cors existente primero para la reversión si es necesario?
David

Intenté esto, pero no funcionó.
user683742

A mí me
funcionó

18

Solo quiero agregar algo a la respuesta. Simplemente vaya a su proyecto en la consola de Google (console.cloud.google.com/home) y seleccione su proyecto. Allí abra la terminal y simplemente cree el archivo cors.json ( touch cors.json) y luego siga la respuesta y edite este archivo ( vim cors.json) como lo sugiere @ frank-van-puffelen

Esto funcionó para mí. ¡Salud!


La consola web en console.cloud.google.com/home me estaba dando un error, pero funcionó bien con Google Cloud SDK Shell.
FiringBlanks

3
... Ahí abres el terminal y ... ¿Cómo abres el terminal? No veo el botón "Abrir terminal" en el enlace
fortesl

Asegúrate de estar en el cloudsubdominio, no en el firebase("console.cloud.google.com/home") y busca el >_botón con el ícono en la parte superior derecha.
Chris Villa

1

Otro enfoque para hacer esto es utilizar la API JSON de Google. paso 1: obtenga el token de acceso para usar con JSON API Para obtener un token, vaya a: https://developers.google.com/oauthplayground/ Luego busque JSON API o Storage Seleccione las opciones requeridas, es decir, leer, escribir, full_access (marque esas que son obligatorios) Siga el proceso para obtener el token de acceso, que será válido por una hora. Paso 2: use el token para acceder a la API JSON de Google para actualizar CORS

Rizo de muestra:

    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

Me gustaría agregar para aquellos que necesitan desesperadamente una solución como yo después de intentar todo esto y no resolver el problema. Encontré un gran artículo en línea que ofrece 3 soluciones, y la primera funcionó para mí ... un complemento de google chrome ... ¡sí! ...

extensión moesif CORS Asegúrese de que después de la instalación, la encienda


2
Esto realmente no resuelve el problema para el usuario desconocido en el campo, solo para una sola máquina.
Elemental

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.