Configura el uso compartido de recursos multiorigen (CORS)

El uso compartido de recursos multiorigen (CORS) es un mecanismo para permitir interacciones entre recursos de diferentes orígenes, algo que suele estar prohibido a fin de prevenir comportamientos maliciosos. Usa este tema para aprender a configurar CORS en un depósito de Cloud Storage.

Para obtener más información sobre la compatibilidad con CORS de Cloud Storage, consulta Comparte recursos multiorigen (CORS).

Configura CORS en un depósito

Debes configurar CORS en un depósito mediante la especificación de información, como los métodos HTTP y los dominios de origen, que identifican los tipos de solicitudes que aceptará. Puedes usar la herramienta de línea de comandos gsutil, la API de XML, la API de JSON o las bibliotecas cliente para Cloud Storage a fin de configurar CORS en un depósito.

Los siguientes ejemplos ilustran cómo configurar CORS en el depósito en example.storage.googleapis.com. Cada ejemplo configura CORS de la siguiente manera:

  • Permite solicitudes que se originan en example.appspot.com.
  • Permite solicitudes que usan los métodos HTTP GET, HEAD o DELETE.
  • Permite que el encabezado de respuesta Content-Type se comparta entre los orígenes.
  • Para solicitudes con verificación previa, permite que el navegador realice solicitudes durante 3,600 segundos (1 hora) antes de que deba repetir la solicitud de verificación previa.

gsutil

Usa el comando gsutil cors para configurar CORS en un depósito:

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

En el que cors-json-file.json contiene lo siguiente:

[
    {
      "origin": ["http://example.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

También puedes usar el comando gsutil cors para obtener la configuración de CORS de un depósito:

gsutil cors get gs://example

Bibliotecas cliente

Si deseas obtener o establecer la configuración de CORS de un depósito de manera programática, usa una de las bibliotecas cliente para Cloud Storage. Usa el siguiente contenido de referencia para comenzar:

API de REST

API de JSON

Usa el método Buckets: insert de la API de JSON para configurar CORS en un depósito nuevo, o Buckets: patch si deseas configurarlo en un depósito existente. En el siguiente ejemplo, se muestra el uso del método Buckets: patch.

PATCH /storage/v1/b/example?fields=cors HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg
content-length: 132
accept: application/json
accept-encoding: gzip, deflate
content-type: application/json

{
  "location": "us-east-1",
  "storageClass": "regional",
  "cors": [
      {
          "maxAgeSeconds": "3600",
          "method": [
             "GET"
             "HEAD"
             "DELETE"
          ],
          "origin": [
             "http://example.appspot.com"
          ],
          "responseHeader":[
            "Content-Type"
         ]
      }
  ]
}

Puedes usar el método Buckets: get para obtener la configuración de CORS de un depósito:

GET https://www.googleapis.com/storage/v1/b/example
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

API de XML

Usa el método Set Bucket CORS de la API de XML para configurar CORS en un depósito.

PUT http://storage.googleapis.com/example?cors HTTP/1.1
Host: storage.googleapis.com
Content-Length: 412
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

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

Puedes usar el método Get Buckets CORS para obtener la configuración de CORS de un depósito:

GET http://storage.googleapis.com/example?cors HTTP/1.1
Host: storage.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

Solución de problemas de solicitudes de CORS

Si te encuentras con un comportamiento inesperado cuando accedes a los depósitos de Cloud Storage desde un origen diferente, prueba los siguientes pasos:

  1. Usa gsutil cors get para obtener la configuración CORS del depósito de destino. Si tienes varias entradas de configuración de CORS, asegúrate de que, a medida que avanzas por los siguientes pasos, los valores de solicitud se correspondan con los valores en la misma entrada de configuración de CORS individual.

  2. Revisa una solicitud y una respuesta con la herramienta que prefieras. En un navegador Chrome, puedes usar las herramientas para desarrolladores estándar a fin de ver esta información:

    1. Haz clic en el Menú de Chrome Ícono de Menú de Chrome en la barra de herramientas del navegador.
    2. Selecciona Más herramientas > Herramientas para desarrolladores.
    3. Haz clic en la pestaña Red.
    4. Desde tu aplicación o la línea de comandos, envía la solicitud.
    5. En el panel que muestra la actividad de la red, busca la solicitud.
    6. En la columna Nombre, haz clic en el nombre correspondiente a la solicitud.
    7. Haz clic en la pestaña Encabezados para ver los encabezados de respuesta, o en la pestaña Respuesta si deseas ver el contenido de la respuesta.

    Si no ves una solicitud y respuesta, es posible que tu navegador tenga almacenado en caché un intento anterior de solicitud de verificación previa con errores. Borrar la caché de tu navegador también debería borrar la caché de la verificación previa. Si no es así, establece el valor de MaxAgeSec en tu configuración de CORS en un valor más bajo (el predeterminado es 1,800 [30 minutos] si no se especifica), espera el que indicaba el MaxAgeSec anterior y reintenta enviar la solicitud. Esto realiza una nueva solicitud de verificación previa, que recupera la nueva configuración de CORS y borra definitivamente las entradas de caché. Una vez que depures tu problema, aumenta MaxAgeSec a un valor más alto, para reducir el tráfico de verificación previa a tu depósito.

  3. Asegúrate de que la solicitud tenga un encabezado Origin y de que su valor coincida con al menos uno de los valores de Origins en la configuración de CORS del depósito. Ten en cuenta que el esquema, el host y el puerto de los valores deben coincidir de forma exacta. Los siguientes son algunos ejemplos de coincidencias aceptables:

    • http://origin.example.com coincide con http://origin.example.com:80 (porque 80 es el puerto HTTP predeterminado), pero no coincide con https://origin.example.com, http://origin.example.com:8080, http://origin.example.com:5151 o http://sub.origin.example.com.

    • https://example.com:443 coincide con https://example.com, pero no con http://example.com o http://example.com:443.

    • http://localhost:8080 solo coincide de forma exacta con http://localhost:8080, no con http://localhost:5555 o http://localhost.example.com:8080.

  4. Asegúrate de que el método HTTP de la solicitud (si se trata de una solicitud simple) o el método especificado en Access-Control-Request-Method (si se trata de una solicitud de verificación previa) coincida con al menos uno de los valores de Methods en la configuración de CORS del depósito.

  5. Si se trata de una solicitud de verificación previa, verifica si incluye uno o más encabezados Access-Control-Request-Header. Si es así, asegúrate de que cada valor de Access-Control-Request-Header coincida con un valor de ResponseHeader en la configuración de CORS del depósito. Todos los encabezados nombrados en Access-Control-Request-Header deben encontrarse en la configuración de CORS para que la solicitud de verificación previa tenga éxito y se incluyan los encabezados de CORS en la respuesta.

¿Te sirvió esta página? Envíanos tu opinión:

Enviar comentarios sobre…

¿Necesitas ayuda? Visita nuestra página de asistencia.