Firebase Storage y Access-Control-Allow-Origin

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 '.

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 .

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

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!

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

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

Para acceder a cualquier recurso con un encabezado CORS aplicado, puede usar un pequeño proyecto que hice en Golang para mí: https://proxify-cors.herokuapp.com/