Ejemplos de configuración de CORS

Descripción general Configuración

En esta página, se muestran ejemplos de configuraciones para el uso compartido de recursos entre dominios (CORS).

Cuando estableces una configuración de CORS en un bucket, permites interacciones entre recursos de diferentes orígenes, algo que por lo general está prohibido para evitar comportamientos maliciosos. Para obtener información sobre cómo estructurar una solicitud que establezca o edite una configuración de CORS en un bucket, consulta las instrucciones en Uso de CORS.

Ten en cuenta los siguientes recursos adicionales:

Configuración básica de CORS

Supongamos que tienes un sitio web dinámico al que los usuarios pueden acceder en your-example-website.appspot.com. Tienes un archivo de imagen alojado en un bucket de Cloud Storage llamado your-example-bucket. Quieres usar la imagen en tu sitio web, por lo que debes aplicar una configuración de CORS en your-example-bucket que permita que los navegadores de tus usuarios soliciten recursos desde el bucket. Según la configuración que se muestra a continuación, las solicitudes preliminares son válidas durante 1 hora y las solicitudes del navegador exitosas muestran el Content-Type del recurso en la respuesta.

API de JSON

{
  "cors": [
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
  ]
}

API de XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://your-example-website.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Cargas directas de archivos (para aplicaciones de una sola página)

Usa esta configuración cuando tu aplicación de frontend necesite subir archivos directamente a un bucket, lo que requiere una operación PUT. Esta es una necesidad común para las aplicaciones de una sola página, en las que la lógica de la aplicación reside en el navegador del usuario en lugar de en un servidor de backend.

Ten en cuenta que las solicitudes de PUT siempre activan una verificación previa.

API de JSON

{
 "cors": [
    {
        "origin": ["https://www.example-website.appspot.com"],
        "method": ["PUT", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

API de XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://your-example-website.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>PUT</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Muestra de código del cliente

JavaScript

// Uploading a file using a Signed URL or direct PUT
await fetch(gcsSignedUrl, {
  method: 'PUT',
  body: fileBlob,
  headers: {
    'Content-Type': 'application/pdf'
  }
});

Acceso a datos autenticado

Usa esta configuración si tu aplicación envía un token de portador o un encabezadoGoogle Identity para acceder a objetos protegidos (no públicos).

API de JSON

{
 "cors": [
    {
        "origin": ["https://www.example-secure-app.appspot.com"],
        "method": ["GET", "HEAD"],
        "responseHeader": ["Authorization", "Content-Type"],
        "maxAgeSeconds": 3600
      }
  ]
}

API de XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://www.example-secure-app.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>HEAD</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Authorization</ResponseHeader>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Permitir el acceso a varios subdominios coincidentes

Usa esta configuración si tienes varios entornos de desarrollo o de etapa de pruebas que necesitan acceder al mismo bucket. Si usas el comodín * cuando especificas un subdominio, puedes hacer coincidir varios subdominios. Por ejemplo, *.example.com se puede usar para que coincida con test.example.com y prod.example.com.

API de JSON

{
 "cors": [
    {
        "origin": ["https://*.example.com"],
        "method": ["GET", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

API de XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://*.example.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Permite el acceso desde cualquier origen

Usa esta configuración para los datos públicos en los que no se requiere restricción. Si especificas el comodín * como origen, se permiten las solicitudes de cualquier origen. Ten en cuenta que, con esta configuración, las solicitudes al bucket fallarán si el cliente establece credentials: include en su solicitud.

API de JSON

{
 "cors": [
    {
        "origin": ["*"],
        "method": ["GET"],
        "responseHeader": ["Content-Type"],
        "maxAgeSeconds": 1800
      }
  ]
}

API de XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>*</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>1800</MaxAgeSec>
  </Cors>
</CorsConfig>

Estructura de configuración de CORS para gcloud CLI

El comando gcloud storage buckets update --cors-file espera un archivo que contenga solo la lista de reglas de CORS. Cuando especifiques una configuración de CORS que se establecerá con Google Cloud CLI, quita el wrapper "cors": de nivel superior del archivo JSON.

Por ejemplo, este comando de gcloud CLI establece una configuración de CORS en un bucket:

gcloud storage buckets update gs://example_bucket --cors-file=example_cors_file.json

Este es un ejemplo de configuración para example_cors_file.json que usa la estructura correcta para el comando gcloud storage buckets update --cors-file.

[
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

¿Qué sigue?