Sviluppare per la condivisione di risorse tra origini diverse (CORS)
Un breve esempio di utilizzo di CORS per accedere al contenuto di AEM da un’applicazione web esterna tramite JavaScript lato client. In questo esempio viene utilizzata la configurazione OSGi CORS per abilitare l’accesso CORS su AEM. L’approccio di configurazione OSGi è fattibile quando:
- Una singola origine accede al contenuto di Pubblicazione AEM
- Per l’Authoring AEM è necessario l’accesso a CORS
Se è necessario l’accesso per più origini alla Pubblicazione AEM, consulta questa documentazione.
In questo video:
- www.example.com è mappato a localhost tramite
/etc/hosts - aem-publish.local è mappato a localhost tramite
/etc/hosts - SimpleHTTPServer (un wrapper per SimpleHTTPServer](https://docs.python.org/2/library/simplehttpserver.html) di [Python) sta distribuendo la pagina HTML tramite la porta 8000.
- Non più disponibile in Mac App Store. Usa simili come Jeeves.
- AEM Dispatcher è in esecuzione in Apache HTTP Web Server 2.4 e proxy di richieste inverso ad
aem-publish.localinlocalhost:4503.
Per ulteriori dettagli, consulta le Informazioni sulla condivisione di risorse tra origini diverse (CORS) in AEM.
www.example.com HTML e JavaScript
Questa pagina web dispone di una logica che
- dopo aver fatto clic sul pulsante
- Invia una richiesta AJAX GET a
http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json - Recupera il modulo
jcr:titledalla risposta JSON - Inserisce
jcr:titlenel 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>
Configurazione OSGi di fabbrica
La configurazione OSGi di fabbrica per Cross-Origin Resource Sharing è disponibile tramite:
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"
/>
Configurazione del Dispatcher dispatcher-configuration
Autorizzare le intestazioni di richiesta CORS
Per consentire alle intestazioni di richiesta HTTP necessarie per il passthrough ad AEM per l’elaborazione, le intestazioni devono essere autorizzate nella configurazione /clientheaders di Dispatcher.
/clientheaders {
...
"Origin"
"Access-Control-Request-Method"
"Access-Control-Request-Headers"
}
Memorizzazione in cache delle intestazioni di risposta CORS
Per consentire la memorizzazione in cache e la gestione delle intestazioni CORS sul contenuto memorizzato nella cache, aggiungi la seguente configurazione /cache /headers al file dispatcher.any della Pubblicazione 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"
}
...
}
...
}
Riavvia l’applicazione server web dopo aver apportato modifiche al file dispatcher.any.
È probabile che sia necessaria la cancellazione completa della cache per garantire che le intestazioni siano memorizzate nella cache in modo appropriato al momento della richiesta successiva dopo un aggiornamento della configurazione di /cache /headers.