El uso compartido de recursos entre dominios (CORS) permite interacciones entre recursos de diferentes orígenes, algo que por lo general está prohibido para evitar comportamientos maliciosos. Usa este tema para aprender a configurar CORS en un bucket de Cloud Storage.
Configura CORS en un bucket
Para establecer una configuración de CORS en un bucket, debes especificar cierta información, como los métodos HTTP y los dominios de origen, que identifique los tipos de solicitudes que aceptará. Puedes usar la herramienta de línea de comandos de gsutil, la API de XML, la API de JSON o las bibliotecas cliente de Cloud Storage a fin de establecer la configuración de CORS en un depósito.
En el siguiente ejemplo, se muestra cómo configurar el CORS en un bucket:
gsutil
Crea un archivo JSON que contenga la siguiente información:
[ { "origin": ["ORIGIN"], "method": ["METHOD"], "responseHeader": ["HEADER"], "maxAgeSeconds": MAX-AGE } ]
En el ejemplo anterior, se ilustra lo siguiente:
ORIGIN
es un origen permitido para el uso compartido de recursos entre dominios con este depósito. Por ejemplo,example.appspot.com
.METHOD
es un método HTTP permitido para el uso compartido de recursos entre dominios con este depósito. Por ejemplo,GET
oPUT
.HEADER
es un encabezado permitido para el uso compartido de recursos entre dominios con este depósito. Por ejemplo,Content-Type
.MAX-AGE
es la cantidad de segundos que el navegador tiene permitido realizar solicitudes antes de que deba repetir la solicitud de verificación previa. Por ejemplo,3600
.
Para obtener más información, consulta Elementos de una configuración de CORS.
Usa el comando
gsutil cors
para configurar CORS en un depósito:gsutil cors set JSON_FILE_NAME.json gs://BUCKET_NAME
En el comando anterior, se ilustra lo siguiente:
JSON_FILE_NAME
es la ruta de acceso al archivo JSON que creaste en el paso 1.BUCKET_NAME
es el nombre del depósito. Por ejemplo,my-bucket
.
Muestras de código
C++
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para C++.
Java
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Java.
Node.js
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Node.js.
Python
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Python.
C#
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para C#.
En este momento, no puedes configurar CORS con la biblioteca cliente de C #.
Comienza a usarlo
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Go.
Si quieres establecer una configuración de CORS para un depósito mediante Go, consulta la documentación de referencia de CORS.
PHP
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para PHP.
Si quieres establecer una configuración de CORS para un depósito mediante PHP, consulta la documentación de referencia de Google\Cloud\Storage\Bucket.
Ruby
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Ruby.
Si quieres establecer una configuración de CORS para un depósito mediante Ruby, consulta la documentación de referencia de Google::Cloud::Storage.
API de REST
API de JSON
- Obtén un token de acceso de autorización de OAuth 2.0 Playground. Configura Playground para usar tus credenciales de OAuth.
Crea un archivo JSON que contenga la siguiente información:
{ "cors": [ { "origin": [ "ORIGIN" ], "method": [ "METHOD" ], "responseHeader": [ "HEADER" ], "maxAgeSeconds": MAX-AGE } ] }
En el ejemplo anterior, se ilustra lo siguiente:
ORIGIN
es un origen permitido para el uso compartido de recursos entre dominios con este depósito. Por ejemplo,example.appspot.com
.METHOD
es un método HTTP permitido para el uso compartido de recursos entre dominios con este depósito. Por ejemplo,GET
oPUT
.HEADER
es un encabezado permitido para el uso compartido de recursos entre dominios con este depósito. Por ejemplo,Content-Type
.MAX-AGE
es la cantidad de segundos que el navegador tiene permitido realizar solicitudes antes de que deba repetir la solicitud de verificación previa. Por ejemplo,3600
.
Para obtener más información, consulta Elementos de una configuración de CORS.
Usa
cURL
para llamar a la API de JSON con una solicitud de depósitoPATCH
:curl --request PATCH \ 'https://storage.googleapis.com/storage/v1/b/BUCKET_NAME' \ --header 'Authorization: Bearer OAUTH2_TOKEN' \ --header 'Content-Type: application/json' \ --data-binary @JSON_FILE_NAME.json
En el ejemplo anterior, se ilustra lo siguiente:
BUCKET_NAME
es el nombre del depósito. Por ejemplo,my-bucket
.OAUTH2_TOKEN
es el token de acceso que generaste en el paso 1.JSON_FILE_NAME
es la ruta de acceso al archivo que creaste en el paso 2.
API de XML
- Obtén un token de acceso de autorización de OAuth 2.0 Playground. Configura Playground para usar tus credenciales de OAuth.
Crea un archivo XML que contenga la siguiente información:
<?xml version="1.0" encoding="UTF-8"?> <CorsConfig> <Cors> <Origins> <Origin>ORIGIN</Origin> </Origins> <Methods> <Method>METHOD</Method> </Methods> <ResponseHeaders> <ResponseHeader>HEADER</ResponseHeader> </ResponseHeaders> <MaxAgeSec>MAX-AGE</MaxAgeSec> </Cors> </CorsConfig>
En el ejemplo anterior, se ilustra lo siguiente:
ORIGIN
es un origen permitido para el uso compartido de recursos entre dominios con este depósito. Por ejemplo,example.appspot.com
.METHOD
es un método HTTP permitido para el uso compartido de recursos entre dominios con este depósito. Por ejemplo,GET
oPUT
.HEADER
es un encabezado permitido para el uso compartido de recursos entre dominios con este depósito. Por ejemplo,Content-Type
.MAX-AGE
es la cantidad de segundos que el navegador tiene permitido realizar solicitudes antes de que deba repetir la solicitud de verificación previa. Por ejemplo,3600
.
Para obtener más información, consulta Elementos de una configuración de CORS.
Usa
cURL
para llamar a la API de XML con una solicitudSet Bucket CORS
:curl -X PUT --data-binary @XML_FILE_NAME.xml \ -H "Authorization: Bearer OAUTH2_TOKEN" \ -H "x-goog-project-id: PROJECT_ID" \ "https://storage.googleapis.com/BUCKET_NAME?cors"
En el ejemplo anterior, se ilustra lo siguiente:
BUCKET_NAME
es el nombre del depósito. Por ejemplo,my-bucket
.OAUTH2_TOKEN
es el token de acceso que generaste en el paso 1.PROJECT_ID
es el ID del proyecto asociado con el depósito. Por ejemplo,my-project
.XML_FILE_NAME
es la ruta de acceso al archivo que creaste en el paso 2.
Visualiza la configuración de CORS de un bucket
Para ver la configuración de CORS de un bucket, realiza las siguientes acciones:
gsutil
Usa el comando gsutil cors
para obtener la configuración de CORS de un depósito:
gsutil cors get gs://BUCKET_NAME
En el comando anterior, BUCKET_NAME
es el nombre del depósito. Por ejemplo, my-bucket
.
Muestras de código
Si quieres ver la configuración de CORS de un bucket mediante las bibliotecas cliente, sigue las instrucciones para mostrar los metadatos de un bucket y busca el campo de CORS en la respuesta:
C++
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para C++.
C#
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para C#.
Comienza a usarlo
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Go.
Java
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Java.
Node.js
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Node.js.
PHP
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para PHP.
Python
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Python.
Ruby
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Ruby.
API de REST
API de JSON
- Obtén un token de acceso de autorización de OAuth 2.0 Playground. Configura Playground para usar tus credenciales de OAuth.
Usa
cURL
para llamar a la API de JSON con una solicitud de depósitoGET
:curl -X GET \ -H "Authorization: Bearer OAUTH2_TOKEN" \ "https://storage.googleapis.com/storage/v1/b/BUCKET_NAME?fields=cors"
En el ejemplo anterior, se ilustra lo siguiente:
OAUTH2_TOKEN
es el nombre del token de acceso que generaste en el paso 1.BUCKET_NAME
es el nombre del depósito correspondiente. Por ejemplo,my-bucket
.
API de XML
- Obtén un token de acceso de autorización de OAuth 2.0 Playground. Configura Playground para usar tus credenciales de OAuth.
Usa
cURL
para llamar a la API de XML con una solicitud de depósitoGET
:curl -X GET \ -H "Authorization: Bearer OAUTH2_TOKEN" \ "https://storage.googleapis.com/BUCKET_NAME?cors"
En el ejemplo anterior, se ilustra lo siguiente:
OAUTH2_TOKEN
es el nombre del token de acceso que generaste en el paso 1.BUCKET_NAME
es el nombre del depósito correspondiente. Por ejemplo,my-bucket
.
Quita el CORS de un bucket
Para quitar la configuración de CORS de un bucket, realiza las siguientes acciones:
gsutil
Crea un archivo JSON que contenga la siguiente información:
[]
Usa el comando
gsutil cors
para configurar CORS en un depósito:gsutil cors set JSON_FILE_NAME.json gs://BUCKET_NAME
En el comando anterior, se ilustra lo siguiente:
JSON_FILE_NAME
es la ruta de acceso al archivo JSON que creaste en el paso 1.BUCKET_NAME
es el nombre del depósito. Por ejemplo,my-bucket
.
Muestras de código
C++
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para C++.
Java
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Java.
Node.js
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Node.js.
Python
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Python.
C#
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para C#.
Por el momento, no puedes trabajar con CORS mediante la biblioteca cliente C#.
Comienza a usarlo
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Go.
A fin de trabajar con las opciones de configuración de CORS para un depósito con Go, consulta la documentación de referencia de CORS.
PHP
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para PHP.
A fin de trabajar con las opciones de configuración de CORS para un depósito con PHP, consulta la documentación de referencia Google\Cloud\Storage\Bucket.
Ruby
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage para Ruby.
A fin de trabajar con las opciones de configuración de CORS para un depósito con Ruby, consulta la documentación de referencia de Google::Cloud::Storage.
API de REST
API de JSON
- Obtén un token de acceso de autorización de OAuth 2.0 Playground. Configura Playground para usar tus credenciales de OAuth.
Crea un archivo JSON que contenga la siguiente información:
{ "cors": [] }
Usa
cURL
para llamar a la API de JSON con una solicitud de depósitoPATCH
:curl --request PATCH \ 'https://storage.googleapis.com/storage/v1/b/BUCKET_NAME' \ --header 'Authorization: Bearer OAUTH2_TOKEN' \ --header 'Content-Type: application/json' \ --data-binary @JSON_FILE_NAME.json
En el ejemplo anterior, se ilustra lo siguiente:
BUCKET_NAME
es el nombre del depósito. Por ejemplo,my-bucket
.OAUTH2_TOKEN
es el token de acceso que generaste en el paso 1.JSON_FILE_NAME
es la ruta de acceso al archivo que creaste en el paso 2.
API de XML
- Obtén un token de acceso de autorización de OAuth 2.0 Playground. Configura Playground para usar tus credenciales de OAuth.
Crea un archivo XML que contenga la siguiente información:
<CorsConfig></CorsConfig>
Usa
cURL
para llamar a la API de XML con una solicitudSet Bucket CORS
:curl -X PUT --data-binary @XML_FILE_NAME.xml \ -H "Authorization: Bearer OAUTH2_TOKEN" \ -H "x-goog-project-id: PROJECT_ID" \ "https://storage.googleapis.com/BUCKET_NAME?cors"
En el ejemplo anterior, se ilustra lo siguiente:
BUCKET_NAME
es el nombre del depósito. Por ejemplo,my-bucket
.OAUTH2_TOKEN
es el token de acceso que generaste en el paso 1.PROJECT_ID
es el ID del proyecto asociado con el depósito. Por ejemplo,my-project
.XML_FILE_NAME
es la ruta de acceso al archivo que creaste en el paso 2.
Soluciona 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:
Usa
gsutil cors get
en el depósito de destino para obtener su configuración de CORS. 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.Comprueba que no estás realizando una solicitud al extremo
storage.cloud.google.com
, que no permite solicitudes de CORS. Para obtener más información sobre los extremos compatibles con CORS, consulta Compatibilidad con CORS de Cloud Storage.Revisa una solicitud y una respuesta mediante la herramienta que prefieras. En un navegador Chrome, puedes usar las herramientas para desarrolladores estándar a fin de ver esta información:
- Haz clic en el menú de Chrome
en la barra de herramientas del navegador.
- Selecciona Más herramientas > Herramientas para desarrolladores.
- Haz clic en la pestaña Red.
- Desde tu aplicación o la línea de comandos, envía la solicitud.
- En el panel que muestra la actividad de la red, busca la solicitud.
- En la columna Nombre, haz clic en el nombre correspondiente a la solicitud.
- 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. Si se borra la caché de tu navegador, también se debería borrar la caché de la comprobación previa. Si esto no sucede, configura el valor
MaxAgeSec
en tu configuración de CORS en un valor más bajo. Si no se especifica, el valor predeterminado es de 1,800 segundos (30 minutos). Espera el tiempo establecido en elMaxAgeSec
anterior y, luego, intenta realizar la solicitud de nuevo. Esto realiza una nueva solicitud de comprobación previa, que recupera la configuración de CORS nueva y borra definitivamente las entradas de caché. Una vez que hayas depurado tu problema, vuelve a aumentarMaxAgeSec
a un valor más alto, para reducir el tráfico de comprobación previa de tu depósito.- Haz clic en el menú de Chrome
Asegúrate de que la solicitud tenga un encabezado
Origin
y que el valor del encabezado coincida con al menos uno de los valoresOrigins
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 conhttp://origin.example.com:80
(ya que 80 es el puerto HTTP predeterminado), pero no coincide conhttps://origin.example.com
,http://origin.example.com:8080
,http://origin.example.com:5151
nihttp://sub.origin.example.com
.https://example.com:443
coincide conhttps://example.com
pero no conhttp://example.com
nihttp://example.com:443
.http://localhost:8080
solo coincide de forma exacta conhttp://localhost:8080
, no conhttp://localhost:5555
nihttp://localhost.example.com:8080
.
Asegúrate de que el método HTTP de la solicitud (si es una solicitud simple) o el método especificado en
Access-Control-Request-Method
(si es una solicitud de comprobación previa) coincida con al menos uno de los valoresMethods
en la configuración de CORS del depósito.Si se trata de una solicitud de comprobación previa, verifica si incluye uno o más encabezados
Access-Control-Request-Header
. Si es así, asegúrate de que cada valorAccess-Control-Request-Header
coincida con un valorResponseHeader
en la configuración de CORS del depósito. Todos los encabezados nombrados enAccess-Control-Request-Header
deben estar en la configuración de CORS para que la solicitud de comprobación previa tenga éxito y se incluyan los encabezados de CORS en la respuesta.
¿Qué sigue?
- Obtén más información sobre el uso compartido de recursos entre dominios (CORS).