Desarrollo para el Intercambio de Recursos de Origen Cruzado (CORS)

Un breve ejemplo de uso CORS AEM para acceder a contenido de la desde una aplicación web externa a través de JavaScript del lado del cliente. AEM Este ejemplo utiliza la configuración OSGi de CORS para habilitar el acceso CORS en el modo de acceso a la. El enfoque de configuración OSGi es viable cuando:

  • AEM Un solo origen es acceder a contenido publicado por el usuario
  • AEM Se requiere acceso CORS para el autor de la

AEM Si se requiere acceso de varios orígenes a Publicación de la, consulte esta documentación.

En este vídeo:

  • www.example.com se asigna a localhost mediante /etc/hosts
  • aem-publish.local se asigna a localhost mediante /etc/hosts
  • SimpleHTTPServer (un contenedor para PythonSimpleHTTPServer de) sirve la página del HTML a través del puerto 8000.
    • Ya no está disponible en Mac App Store. Utilice funciones similares como Jeeves.
  • AEM Dispatcher se está ejecutando el Apache HTTP Web Server 2.4 y la solicitud de proxy inverso a aem-publish.local hasta localhost:4503.

Para obtener más información, consulte AEM Comprender el Intercambio de Recursos de Origen Cruzado (CORS) en la.

HTML de www.example.com y JavaScript

Esta página web tiene una lógica que

  1. Al hacer clic en el botón
  2. Crea un AJAX GET solicitud a http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json
  3. Recupera el jcr:title de la respuesta JSON
  4. Inserta el jcr:title en el DOM
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</head>
<body style="width: 960px; margin: 2rem auto; font-size: 2rem;">
    <button style="font-size: 2rem;"
            data="fn-getTitle">Get Title as JSON from AEM</button>
    <pre id="title">The page title AJAX'd in from AEM will injected here</pre>

    <script>
    $(function() {

        /** Get Title as JSON **/
        $('body').on('click', '[data="fn-getTitle"]', function(e) {
            $.get('http://aem-publish.local/content/we-retail/us/en/experience/_jcr_content.1.json', function(data) {
                $('#title').text(data['jcr:title']);
            },'json');

            e.preventDefault();
            return false;
        });
    });
    </script>
</body>
</html>

Configuración de fábrica de OSGi

La fábrica de configuración de OSGi para Cross-Origin Resource Sharing está disponible mediante:

  • http://<host>:<port>/system/console/configMgr > Adobe Granite Cross-Origin Resource Sharing Policy
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="sling:OsgiConfig"
    alloworigin="[https://www.example.com:8000]"
    alloworiginregexp="[]"
    allowedpaths="[/content/we-retail/.*]"
    exposedheaders="[]"
    maxage="{Long}1800"
    supportedheaders="[Origin,Accept,X-Requested-With,Content-Type,
Access-Control-Request-Method,Access-Control-Request-Headers]"
    supportedmethods="[GET]"
    supportscredentials="{Boolean}false"
/>

Configuración de Dispatcher dispatcher-configuration

Permitir encabezados de solicitud CORS

Para permitir el AEM Encabezados de solicitud HTTP para pasarlos a la para su procesamiento, deben estar permitidos en el de Dispatcher /clientheaders configuración.

/clientheaders {
   ...
   "Origin"
   "Access-Control-Request-Method"
   "Access-Control-Request-Headers"
}

Almacenamiento en caché de encabezados de respuesta CORS

Para permitir el almacenamiento en caché y el servicio de encabezados CORS en contenido almacenado en caché, agregue lo siguiente /cache /headers configuración AEM a la publicación de la dispatcher.any archivo.

/publishfarm {
    ...
    /cache {
        ...
        # CORS HTTP response headers
        # https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_response_headers
        /headers {
            ...
            "Access-Control-Allow-Origin"
            "Access-Control-Expose-Headers"
            "Access-Control-Max-Age"
            "Access-Control-Allow-Credentials"
            "Access-Control-Allow-Methods"
            "Access-Control-Allow-Headers"
        }
    ...
    }
...
}

Reinicie la aplicación del servidor web después de realizar cambios en el dispatcher.any archivo.

Es probable que se necesite borrar la caché por completo para garantizar que los encabezados se almacenen correctamente en la caché en la siguiente solicitud después de un /cache /headers actualización de configuración.

Materiales de apoyo supporting-materials

recommendation-more-help
c92bdb17-1e49-4e76-bcdd-89e4f85f45e6