Ejemplos de configuración de CORS

Descripción general Configuración

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

Cuando configuras CORS en un segmento, permites las interacciones entre recursos de diferentes orígenes, algo que normalmente está prohibido para evitar comportamientos maliciosos. Para saber cómo estructurar una solicitud que defina o edite una configuración de CORS en un segmento, consulta las instrucciones de Usar CORS.

Consulta 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 segmento 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 a los navegadores de tus usuarios solicitar recursos del bucket. Según la siguiente configuración, las solicitudes de comprobación previa son válidas durante 1 hora y las solicitudes de navegador correctas devuelven el Content-Type del recurso en la respuesta.

API JSON

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

API 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>

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

Usa esta configuración cuando tu aplicación frontend necesite subir archivos directamente a un segmento, lo que requiere una operación PUT. Es una necesidad habitual de 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 backend.

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

API JSON

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

API 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>

Código de ejemplo del lado 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 encabezado de identidad para acceder a objetos protegidos (no públicos).Google

API JSON

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

API 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 pruebas que necesitan acceder al mismo segmento. Si usas el comodín * al especificar un subdominio, podrás buscar coincidencias en varios subdominios. Por ejemplo, *.example.com se puede usar para buscar coincidencias con test.example.com y prod.example.com.

API JSON

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

API 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>

Permitir el acceso a cualquier origen

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

API JSON

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

API 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 la CLI de gcloud

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

Por ejemplo, este comando de la CLI de gcloud define una configuración de CORS en un segmento:

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

Esta es una configuración de ejemplo de 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
    }
]

Siguientes pasos