Desarrollo para el Intercambio de Recursos de Origen Cruzado (CORS)
Un ejemplo breve de cómo aprovechar CORS para acceder al contenido de AEM desde una aplicación web externa a través de JavaScript del lado del cliente. Este ejemplo utiliza la configuración OSGi de CORS para habilitar el acceso CORS en AEM. El enfoque de configuración OSGi es viable cuando:
- Un solo origen accede al contenido de publicación de AEM
- Se requiere acceso CORS para AEM Author
Si se requiere acceso de varios orígenes a AEM Publish, 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 SimpleHTTPServer🔗 de Python) sirve la página de HTML a través del puerto 8000.
- Ya no está disponible en Mac App Store. Usar elementos similares como Jeeves.
- AEM Dispatcher se está ejecutando en Apache HTTP Web Server 2.4 y la solicitud de proxy inverso de
aem-publish.localalocalhost:4503.
Para obtener más información, Explicación del intercambio de recursos de origen cruzado (CORS) en AEM.
www.example.com HTML y JAVASCRIPT
Esta página web tiene una lógica que
- Al hacer clic en el botón
- Realiza una solicitud de AJAX GET a
http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json - Recupera
jcr:titlede la respuesta JSON - Inserta
jcr:titleen 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
El generador de configuración OSGi para Cross-Origin Resource Sharing está disponible a través de:
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 que los encabezados de solicitud HTTP necesarios pasen a AEM para el procesamiento, deben estar permitidos en la configuración /clientheaders de Dispatcher.
/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 la siguiente configuración /cache /headers al archivo dispatcher.any de publicación de AEM.
/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 archivo dispatcher.any.
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 una actualización de configuración de /cache /headers.