Configuración del uso compartido de recursos entre orígenes (CORS)

El uso compartido de recursos entre orígenes (CORS) es un mecanismo que permite interacciones entre recursos de diferentes orígenes, algo que suele estar prohibido para evitar el comportamiento malicioso. Este tema te servirá para aprender a configurar CORS en un segmento de Cloud Storage.

Si quieres obtener más información sobre la compatibilidad del CORS con Cloud Storage, consulta la sección sobre uso compartido de recursos entre orígenes (CORS).

Configurar el uso compartido de recursos entre orígenes en un segmento

Puedes especificar información que identifica los tipos de peticiones que se van a aceptar, como métodos HTTP y dominios de origen, para establecer la configuración del CORS. Puedes usar la herramienta de línea de comandos gsutil, la API XML, la API JSON o las bibliotecas cliente de Cloud Storage para configurar el CORS en un segmento.

En los siguientes ejemplos se muestra cómo configurar el CORS para el segmento en example.storage.googleapis.com. En cada ejemplo se establece la configuración del CORS de la siguiente manera:

• Se admiten peticiones que provienen de example.appspot.com.
• Se admiten peticiones que usan los métodos HTTP GET, HEAD o DELETE.
• Se permite que el encabezado de respuesta de Content-Type se comparta entre los orígenes.
• En el caso de las peticiones preparatorias, se permite que el explorador realice peticiones durante 3600 segundos (1 hora) antes de que se deban repetir dichas peticiones.

gsutil

El comando gsutil cors de la herramienta de línea de comandos gsutil sirve para configurar el CORS en un segmento.

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

Debes hacerlo donde el archivo cors-json-file.json presenta estas líneas:

[
    {
      "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 del CORS de un segmento:

gsutil cors get gs://example

API XML

El método Set Bucket CORS de la API XML sirve para configurar el CORS en un segmento.

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>

Usa OAuth 2.0 para obtener un token de autorización que puedas usar para llamar a la API XML. Si quieres obtener un token de forma manual para usarlo de inmediato, hazlo mediante OAuth 2.0 Playground. Si quieres obtener más información sobre la configuración de OAuth en la aplicación, consulta el apartado sobre cómo usar OAuth 2.0 para acceder a Google APIs.

Puedes utilizar el método Get Bucket CORS para obtener la configuración del CORS de un segmento:

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

API JSON

El método Buckets: insert de la API JSON sirve para configurar el CORS en un nuevo segmento, y el método de Buckets: patch de la API JSON, para configurar el CORS en un segmento. Con el siguiente ejemplo se muestra el uso del método de Buckets: patch.

PATCH /storage/v1/b/example?alt=json&fields=id&projection=noAcl 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"
         ]
      }
  ]
}

OAuth 2.0 sirve para obtener un token de autorización que se pueda usar para llamar a la API JSON. Si quieres obtener un token de forma manual que puedas usar de inmediato, hazlo mediante OAuth 2.0 Playground. Si quieres obtener más información sobre la configuración de OAuth en la aplicación, consulta el apartado sobre cómo usar OAuth 2.0 para acceder a Google APIs.

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

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

Bibliotecas cliente

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

• Referencia de Go: type BucketHandle
• Referencia de Java: Class Cors
• Node.js: Bucket
• Referencia de PHP: Google\Cloud\Storage\StorageClient
• Referencia de Python: cors
• Referencia de Ruby: Google::Cloud::Storage

Solucionar problemas de peticiones del CORS

Si te encuentras con un comportamiento inesperado al acceder a segmentos de Cloud Storage de un origen diferente, sigue estos pasos:

1. Usa el método gsutil cors get en el segmento de destino para obtener la configuración del CORS. Si tienes varias entradas de configuración del CORS, asegúrate de seguir estos pasos para que los valores de la petición se asignen a los valores de la misma entrada individual de configuración del CORS.
2. Revisa una petición y su respuesta mediante la herramienta que prefieras. En un explorador Chrome, puedes usar las herramientas de desarrollador estándar para ver esta información:
   1. Haz clic en el menú de Chrome , situado en la barra de herramientas del explorador.
   2. Selecciona Más herramientas > Herramientas para desarrolladores.
   3. Haz clic en la pestaña Network (Red).
   4. Envía la petición desde la aplicación o la línea de comandos.
   5. Localiza la petición en el panel en el que se muestra la actividad de red.
   6. En la columna Name (Nombre), haz clic en el nombre que corresponda a la petición.
   7. Haz clic en la pestaña Headers (Encabezados) para ver los encabezados de respuesta, o bien haz clic en la pestaña Response (Respuesta) para ver el contenido de la respuesta.

   Si no ves una petición y una respuesta, puede que el explorador haya almacenado en caché un intento fallido anterior de realizar una petición preparatoria. Si borras la caché del explorador, puede que también se borre la caché preparatoria. Si no lo haces, establece un valor inferior para MaxAgeSec en la configuración del CORS (el valor predeterminado es 1800, es decir, 30 minutos, si no se especifica), espera durante el tiempo MaxAgeSec que se había establecido anteriormente y, a continuación, intenta volver a realizar la petición. Así se realiza una nueva petición preparatoria con la que se extrae la nueva configuración del CORS y se eliminan definitivamente las entradas de la memoria caché. Una vez que hayas conseguido solucionar el problema, vuelve a establecer un valor superior de MaxAgeSec para reducir el tráfico preparatorio del segmento.

3. Asegúrate de que la petición tenga un encabezado Origin y de que el valor del encabezado coincida con al menos uno de los valores Origins de la configuración del CORS del segmento. Ten en cuenta que el esquema, el host y el puerto de los valores deben coincidir de forma exacta. Estos 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 ni http://sub.origin.example.com.
   • https://example.com:443 coincide con https://example.com, pero no con http://example.com ni http://example.com:443.
   • http://localhost:8080 solo coincide de forma exacta con http://localhost:8080, pero no con http://localhost:5555 ni http://localhost.example.com:8080.
4. Asegúrate de que el método HTTP de la petición (si es una petición simple) o el método especificado en Access-Control-Request-Method (si es una petición preparatoria), coincidan con al menos uno de los valores de Methods de la configuración del CORS del segmento.
5. Si se trata de una petición preparatoria, consulta si se incluyen uno o más encabezados de Access-Control-Request-Header. De ser así, asegúrate de que cada valor de Access-Control-Request-Header coincida con un valor de ResponseHeader en la configuración del CORS del segmento. Con el fin de que la petición preparatoria se realice correctamente e incluya encabezados de uso compartido de recursos entre orígenes, todos los encabezados mencionados en Access-Control-Request-Header deben encontrarse en la configuración de uso compartido de recursos entre orígenes.