Agregar compatibilidad con CORS a un proxy API

Esta página se aplica a Apigee y Apigee híbrido .

Ver la documentación de Apigee Edge .

CORS (Intercambio de recursos entre orígenes) es un mecanismo estándar que permite que las llamadas XMLHttpRequest (XHR) de JavaScript ejecutadas en una página web interactúen con recursos de dominios que no son de origen. CORS es una solución común para la política del mismo origen , implementada por todos los navegadores. Por ejemplo, si realiza una llamada XHR a la API de Twitter desde código JavaScript que se ejecuta en su navegador, la llamada fallará. Esto se debe a que el dominio que sirve la página a su navegador no es el mismo que sirve la API de Twitter. CORS ofrece una solución a este problema al permitir que los servidores la acepten si desean proporcionar intercambio de recursos entre orígenes.

Caso de uso típico de CORS

El siguiente código de JQuery llama a un servicio de destino ficticio. Si se ejecuta desde el contexto de un navegador (una página web), la llamada fallará debido a la política de mismo origen:

<script>
var url = "http://service.example.com";
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        type:"GET",
        url:url,
        async:true,
        dataType: "json",
           success: function(json) {
              // Parse the response.
              // Do other things.
           },
           error: function(xhr, status, err) {
              // This is where we end up!
            }
    });
  });
});
</script>

Una solución a este problema es crear un proxy de API de Apigee que llame a la API del servicio en el backend. Recuerde que Apigee se encuentra entre el cliente (en este caso, un navegador) y la API del backend (el servicio). Dado que el proxy de API se ejecuta en el servidor, no en un navegador, puede llamar al servicio correctamente. A continuación, solo es necesario adjuntar encabezados CORS a la respuesta de TargetEndpoint. Si el navegador admite CORS, estos encabezados le indican que puede flexibilizar su política de origen único, lo que permite que la llamada a la API de origen cruzado se realice correctamente.

Una vez creado el proxy compatible con CORS, puede llamar a la URL del proxy de la API en lugar del servicio backend en el código del lado del cliente. Por ejemplo:

<script>
var url = "http://myorg-test.apigee.net/v1/example";
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        type:"GET",
        url:url,
        async:true,
        dataType: "json",
           success: function(json) {
              // Parse the response.
              // Do other things.
           },
           error: function(xhr, status, err) {
              // This time, we do not end up here!
            }
    });
  });
});
</script>

Adjuntar la política CORS al PreFlow de solicitud del ProxyEndpoint

Adjuntar una política CORS a un nuevo proxy API

Puede agregar compatibilidad con CORS a un proxy de API adjuntando una política Agregar CORS al proxy de API de las siguientes maneras:

  • Al crear la política seleccionando la casilla de verificación Agregar encabezados CORS en la página Seguridad del asistente Crear un proxy
  • Agregándolo más tarde desde el cuadro de diálogo Agregar política

Cuando agrega la política CORS seleccionando la casilla de verificación, se agrega automáticamente una política llamada Agregar CORS al sistema y se adjunta al preflujo de solicitud de TargetEndpoint .

La política "Añadir CORS" añade los encabezados correspondientes a la respuesta. Básicamente, los encabezados indican al navegador con qué orígenes compartirá sus recursos, qué métodos acepta, etc. Puede obtener más información sobre estos encabezados CORS en la Recomendación del W3C sobre el Intercambio de Recursos entre Orígenes .

Debes modificar la política de la siguiente manera:

  • Agregue los encabezados content-type y authorization (necesarios para admitir la autenticación básica o OAuth2) al encabezado Access-Control-Allow-Headers , como se muestra en el extracto de código a continuación.
  • Para la autenticación OAuth2, es posible que deba tomar medidas para corregir el comportamiento que no cumple con RFC . 
<CORS continueOnError="false" enabled="true" name="add-cors">
    <DisplayName>Add CORS</DisplayName>
    <AllowOrigins>{request.header.origin}</AllowOrigins>
    <AllowMethods>GET, PUT, POST, DELETE</AllowMethods>
    <AllowHeaders>origin, x-requested-with, accept, content-type, authorization</AllowHeaders>
    <ExposeHeaders>*</ExposeHeaders>
    <MaxAge>3628800</MaxAge>
    <AllowCredentials>false</AllowCredentials>
    <GeneratePreflightResponse>true</GeneratePreflightResponse>
    <IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
</CORS>

Agregar encabezados CORS a un proxy existente

Nuevo editor de proxy

Para agregar la política CORS a un proxy API existente:

  1. Si está utilizando la interfaz de usuario de Apigee en la consola de Cloud : seleccione Desarrollo de proxy > Proxies de API .

    Si está utilizando la interfaz de usuario clásica de Apigee : seleccione Desarrollar > Proxies de API y, en el panel Proxies , seleccione el entorno para el proxy.

  2. Seleccione el proxy API al que desea agregar la política CORS.
  3. En el editor del nuevo proxy API, haga clic en la pestaña Desarrollar .
  4. En el panel izquierdo, haga clic en el botón + en la fila Políticas .

  5. En el cuadro de diálogo Crear política , haga clic en el campo Seleccionar tipo de política y desplácese hacia abajo hasta Seguridad y seleccione CORS .

  6. Ingrese los detalles de la política y haga clic en Crear .

  7. En el panel de la izquierda, haga clic en PreFlow en Puntos finales de destino > predeterminado .
  8. Haga clic en el botón + junto a PreFlow en el panel Solicitud en la parte inferior derecha del Editor visual.
  9. En el cuadro de diálogo Agregar paso de política , seleccione la política CORS .

  10. Haga clic en Agregar para adjuntar la política.

Editor de proxy clásico

Para agregar la política CORS a un proxy API existente:

  1. Inicie sesión en la interfaz de usuario de Apigee .
  2. Seleccione Desarrollar > Proxies API en la barra de navegación izquierda.
    3. Si ve el botón Probar ahora , haga clic en él para mostrar la nueva vista Desarrollar .

    La vista Desarrollar se muestra a continuación.

    Desarrollar vista en el Editor de proxy

  3. Seleccione el proxy API al que desea agregar la política CORS.
  4. En el editor del nuevo proxy API, haga clic en la pestaña Desarrollar :
  5. En el panel del Navegador izquierdo, haga clic en PreFlow en Puntos finales de destino > predeterminado .
  6. Haga clic en el botón superior +Paso , correspondiente al preflujo de solicitud. Esto mostrará una lista categorizada de todas las políticas que puede crear.
  7. Seleccione CORS en la categoría Seguridad .
  8. Proporcione un nombre, como Add CORS y luego haga clic en Agregar .

Manejo de solicitudes de verificación previa de CORS

La verificación previa de CORS consiste en enviar una solicitud a un servidor para verificar su compatibilidad con CORS. Las respuestas típicas de la verificación previa incluyen los orígenes desde los que el servidor aceptará solicitudes CORS, una lista de métodos HTTP compatibles con las solicitudes CORS, los encabezados que se pueden usar como parte de la solicitud de recursos, el tiempo máximo que la respuesta de verificación previa se almacenará en caché, etc. Si el servicio no indica compatibilidad con CORS o no desea aceptar solicitudes de origen cruzado desde el origen del cliente, se aplicará la política de origen cruzado del navegador y cualquier solicitud de dominio cruzado realizada desde el cliente para interactuar con los recursos alojados en ese servidor fallará.

Normalmente, las solicitudes de verificación previa de CORS se realizan con el método HTTP OPTIONS. Cuando un servidor compatible con CORS recibe una solicitud OPTIONS, devuelve al cliente un conjunto de encabezados CORS que indican su nivel de compatibilidad. Gracias a este protocolo de enlace, el cliente sabe qué puede solicitar del dominio que no es el de origen.

Para más información sobre la verificación previa, consulte la Recomendación del W3C sobre el Intercambio de Recursos entre Orígenes . Además, existen numerosos blogs y artículos sobre CORS que puede consultar.

Apigee no incluye una solución de verificación previa CORS de fábrica, pero es posible implementarla, como se describe en esta sección. El objetivo es que el proxy evalúe una solicitud OPTIONS en un flujo condicional. Posteriormente, el proxy puede enviar una respuesta adecuada al cliente.

Veamos un flujo de muestra y luego analicemos las partes que manejan la solicitud de verificación previa: 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="default">
    <Description/>
    <Flows>
        <Flow name="OptionsPreFlight">
            <Request>
                <Step>
                    <Name>add-cors</Name>
                </Step>
            </Request>
            <Response/>
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
        </Flow>
    </Flows>

    <PreFlow name="PreFlow">
        <Request/>
        <Response/>

    </PreFlow>
    <HTTPProxyConnection>
        <BasePath>/v1/cnc</BasePath>
        <VirtualHost>default</VirtualHost>
        <VirtualHost>secure</VirtualHost>
    </HTTPProxyConnection>
    <RouteRule name="NoRoute">
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
    </RouteRule>
    <RouteRule name="default">
        <TargetEndpoint>default</TargetEndpoint>
   </RouteRule>
   <PostFlow name="PostFlow">
        <Request/>
        <Response/>
    </PostFlow>
</ProxyEndpoint>

Las partes clave de este ProxyEndpoint son las siguientes:

  • Se crea una RouteRule para un objetivo NULL con una condición para la solicitud OPTIONS. Tenga en cuenta que no se ha especificado ningún TargetEndpoint. Si se recibe la solicitud OPTIONS y los encabezados Origin y Access-Control-Request-Method no son nulos, el proxy devuelve inmediatamente los encabezados CORS en una respuesta al cliente (omitiendo el objetivo predeterminado del backend). Para obtener más información sobre las condiciones de flujo y RouteRule, consulte Condiciones con variables de flujo .
    <RouteRule name="NoRoute">
    <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
</RouteRule>
  • Se crea un flujo OptionsPreFlight que agrega una política Add CORS, que contiene los encabezados CORS, al flujo si se recibe una solicitud OPTIONS y los encabezados de solicitud Origin y Access-Control-Request-Method no son nulos.
     <Flow name="OptionsPreFlight">
            <Request>
                <Step>
                    <Name>add-cors</Name>
                </Step>
            </Request>
            <Response/>
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
 </Flow>