Error CORS en Google Cloud Storage

Cómo solventar el error de CORS en Google Cloud Storage.

Permisos del bucket y objetos

Antes de nada revisa que el bucket y el/los fichero/s que quieres acceder son públicos. Para ello en el bucket y objetos tienes que indicar el permiso de “allUsers” y darle permisos de lectura.

Te tendrá que aparecer en el Google Cloud storage algo como lo siguiente:

Ejecutar gsutil para establecer permisos de CORS

Después tienes que ejecutar un comando de gsutil al que le tendrás que pasar un fichero de configuración. Lo primero crea el fichero y guarda la configuración que necesites.

Crea el fichero:

vim cors-json-file.json

Establece la configuración:
Nota: reemplaza el dominio por el que necesites en tu caso.

[
  {
    "origin": [
      "https://*.pedroventura.com"
    ],
    "responseHeader": [
      "Content-Type"
    ],
    "method": [
      "GET"
    ],
    "maxAgeSeconds": 3600
  }
]

Por último ejecuta el siguiente comando para setear la configuración de CORS sobre tu bucket.
NOTA: cambia “blogpv” por el nombre de tu bucket:

gsutil cors set cors-json-file.json gs://blogpv

Te tendrá que aparecer un mensaje por consola

Puedes ejecutar la siguiente función JS desde la consola de Chrome para validar que recibes bien el objeto desde Google Cloud Storage y que te funciona finalmente ya no tienes errores por las CORS.

fetch('https://storage.googleapis.com/blogpv/sample.json')
  .then(response => response.json())
  .then(json => console.log(json))

Puedes revisar la documentación de Google Cloud Storage y CORS en el siguiente enlace: https://cloud.google.com/storage/docs/configuring-cors#configure-cors-gsutil