Estos contenidos se han traducido de forma automática para su comodidad, pero Huawei Cloud no garantiza la exactitud de estos. Para consultar los contenidos originales, acceda a la versión en inglés.
Centro de ayuda> API Gateway> Guía del usuario> API Opening> Gestión de API> CORS
Actualización más reciente 2023-11-30 GMT+08:00
Ver PDF

CORS

¿Qué es el CORS?

Por razones de seguridad, los navegadores restringen las solicitudes de origen cruzado iniciadas desde scripts. Esto significa que una aplicación web solo puede solicitar recursos desde su origen. El mecanismo CORS permite a los navegadores enviar XMLHttpRequest a servidores en otros dominios y solicitar acceso a los recursos allí.

Figura 1 Flujo de proceso del mecanismo CORS

Hay dos tipos de solicitudes CORS:

  • Simple requests
    Las solicitudes simples deben cumplir las siguientes condiciones:
    1. El método de solicitud es HEAD, GET o POST.
    2. El encabezado de solicitud contiene solo los siguientes campos:
      • Accept
      • Accept-Language
      • Content-Language
      • Last-Event-ID
      • Content-Type (application/x-www-form-urlencoded, multipart/form-data, or text/plain)

    En el encabezado de una solicitud simple, los navegadores agregan automáticamente el campo Origin para especificar el origen (incluidos el protocolo, el dominio y el puerto) de la solicitud. Después de recibir tal solicitud, el servidor de destino determina si la solicitud es segura y puede aceptarse basándose en el origen. Si el servidor envía una respuesta que contiene el campo Access-Control-Allow-Origin, el servidor acepta la solicitud.

  • Not-so-simple requests

    Las solicitudes que no cumplen las condiciones para solicitudes simples son solicitudes no tan simples.

    Antes de enviar una solicitud no tan simple, los navegadores envían una solicitud de comprobación previa HTTP al servidor de destino para confirmar si el origen desde el que se carga la página web está en la lista de origen permitido, y para confirmar qué métodos de solicitud HTTP y campos de encabezado se pueden usar. Si la solicitud de comprobación previa se realiza correctamente, los navegadores envían solicitudes simples al servidor.

Configuración de CORS

CORS está deshabilitado por defecto. Para habilitar CORS para una API, realice las operaciones descritas en esta sección. Para personalizar los encabezados de solicitud, los métodos de solicitud y los orígenes permitidos para el acceso entre dominios, cree un plug-in CORS.

  • Simple CORS requests

    Al crear una API, habilite CORS en la página de configuración de solicitud de API. Para obtener más información, consulte Solicitud simple.

    Figura 2 CORS
  • Not-so-simple CORS requests

    Si tu API recibirá solicitudes no tan sencillas, cree otra API a la que se accederá mediante el método OPTIONS en el mismo grupo que la API de destino para recibir solicitudes de comprobación previa.

    Siga este procedimiento para definir la API de solicitud de comprobación previa. Para obtener más información, consulte Not-So-Simple Request.

    1. En la página Set Basic Information, seleccione None para omitir la autenticación de seguridad.
      Figura 3 None authentication
    2. En la página Define API Request, realice la siguiente configuración:
      • Protocol: El mismo protocolo utilizado por la API con CORS habilitado.
      • Path: escriba una barra diagonal (/).
      • Method: Seleccione OPTIONS.
      • CORS: Habilitado.
      Figura 4 Definición de la solicitud de API
    3. Seleccione el tipo de backend Mock.
      Figura 5 Mock backend service

Solicitud simple

Al crear una API que recibirá solicitudes simples, habilite CORS para la API.

Escenario 1: Si CORS está habilitado y la respuesta del backend no contiene un encabezado CORS, API Gateway maneja las solicitudes de cualquier dominio y devuelve el encabezado Access-Control-Allow-Origin. Por ejemplo:

Solicitud enviada por un navegador y que contiene el campo Encabezado Origen:

GET /simple HTTP/1.1
Host: www.test.com
Origin: http://www.cors.com
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Accept: application/json
Date: Tue, 15 Jan 2019 01:25:52 GMT

Origin: This field is required to specify the origin (http://www.cors.com in this example) of the request. API Gateway and the backend service determine based on the origin whether the request is safe and can be accepted.

Response sent by the backend service:

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway

{"status":"200"}

Respuesta enviada por API Gateway:

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway
X-Request-Id: 454d689fa69847610b3ca486458fb08b
Access-Control-Allow-Origin: *

{"status":"200"}

Access-Control-Allow-Origin: Este campo es requerido. El asterisco (*) significa que API Gateway gestiona las solicitudes enviadas desde cualquier dominio.

Escenario 2: Si CORS está habilitado y la respuesta del backend contiene un encabezado CORS, el encabezado sobrescribirá el agregado por API Gateway. Los siguientes mensajes se utilizan como ejemplos:

Solicitud enviada por un navegador y que contiene el campo Encabezado Origen:

GET /simple HTTP/1.1
Host: www.test.com
Origin: http://www.cors.com
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Accept: application/json
Date: Tue, 15 Jan 2019 01:25:52 GMT

Origin: Este campo es obligatorio para especificar el origen (el http://www.cors.com en este ejemplo) de la solicitud. API Gateway y el servicio de backend determinan en función del origen si la solicitud es segura y puede aceptarse.

Respuesta enviada por el servicio backend:

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway
Access-Control-Allow-Origin: http://www.cors.com

{"status":"200"}

Access-Control-Allow-Origin: Indica que el servicio backend acepta solicitudes enviadas desde http://www.cors.com.

Respuesta enviada por API Gateway:

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway
X-Request-Id: 454d689fa69847610b3ca486458fb08b
Access-Control-Allow-Origin: http://www.cors.com

{"status":"200"}

El encabezado CORS en la respuesta de backend sobrescribe eso en la respuesta de API Gateway.

Not-So-Simple Request

Cuando cree una API que recibirá solicitudes no tan simples, habilite CORS para la API siguiendo las instrucciones en Configuración de CORS, y cree otra API a la que se accederá mediante el método OPTIONS.

Si usa el plug-in CORS para una API, no necesita crear otra API que use el método OPTIONS.

Los parámetros de solicitud de una API a la que se accede mediante el método OPTIONS deben establecerse de la siguiente manera:

  • API Group: El mismo grupo al que pertenece la API con CORS habilitado.
  • Security Authentication: seleccione None. No se requiere autenticación para las solicitudes recibidas por la nueva API, independientemente del modo de autenticación de seguridad seleccionado.
  • Protocol: El mismo protocolo utilizado por la API con CORS habilitado.
  • Path: Ingrese un (/) de barra diagonal o seleccione la ruta para la que se ha establecido o coincide con la API con CORS habilitada.
  • Method: Seleccione OPTIONS.
  • CORS: Habilitado.

Las siguientes son solicitudes y respuestas de ejemplo enviadas a o desde un backend simulado.

Solicitud enviada desde un navegador a una API a la que se accede mediante el método OPTIONS:

OPTIONS /HTTP/1.1
User-Agent: curl/7.29.0
Host: localhost
Accept: */*
Origin: http://www.cors.com
Access-Control-Request-Method: PUT 
Access-Control-Request-Headers: X-Sdk-Date
  • Origin: Este campo es obligatorio para especificar el origen desde el que se ha enviado la solicitud.
  • Access-Control-Request-Method: Este campo es necesario para especificar los métodos HTTP que se usarán en las solicitudes simples posteriores.
  • Access-Control-Request-Headers: Este campo es opcional y se utiliza para especificar los campos de encabezado adicionales en las solicitudes simples posteriores.

Response sent by the backend: ninguno

Respuesta enviada por API Gateway:

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 02:38:48 GMT
Content-Type: application/json
Content-Length: 1036
Server: api-gateway
X-Request-Id: c9b8926888c356d6a9581c5c10bb4d11
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Stage,X-Sdk-Date,X-Sdk-Nonce,X-Proxy-Signed-Headers,X-Sdk-Content-Sha256,X-Forwarded-For,Authorization,Content-Type,Accept,Accept-Ranges,Cache-Control,Range
Access-Control-Expose-Headers: X-Request-Id,X-Apig-Latency,X-Apig-Upstream-Latency,X-Apig-RateLimit-Api,X-Apig-RateLimit-User,X-Apig-RateLimit-App,X-Apig-RateLimit-Ip,X-Apig-RateLimit-Api-Allenv
Access-Control-Allow-Methods: GET,POST,PUT,DELETE,HEAD,OPTIONS,PATCH
Access-Control-Max-Age: 172800
  • Access-Control-Allow-Origin: Este campo es requerido. El asterisco (*) significa que API Gateway gestiona las solicitudes enviadas desde cualquier dominio.
  • Access-Control-Allow-Headers: Este campo es obligatorio si está contenido en la solicitud. Indica todos los campos de encabezado que se pueden usar durante el acceso de origen cruzado.
  • Access-Control-Expose-Headers: Estos son los campos de encabezado de respuesta que se pueden ver durante el acceso entre regiones.
  • Access-Control-Allow-Methods: Este campo es necesario para especificar qué métodos de solicitud HTTP admite la API Gateway.
  • Access-Control-Max-Age: Este campo es opcional y se utiliza para especificar el tiempo (en segundos) durante el cual el resultado de la comprobación previa permanece válido. No se enviarán más solicitudes de comprobación previa dentro del período especificado.

Solicitud enviada por un navegador y que contiene el campo Encabezado Origen:

PUT /simple HTTP/1.1
Host: www.test.com
Origin: http://www.cors.com
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Accept: application/json
Date: Tue, 15 Jan 2019 01:25:52 GMT

Respuesta enviada por el backend:

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway

{"status":"200"}

Respuesta enviada por API Gateway:

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway
X-Request-Id: 454d689fa69847610b3ca486458fb08b
Access-Control-Allow-Origin: *

{"status":"200"}

Tema principal: Gestión de API