Sviluppo per la condivisione CORS (Cross-Origin Resource Sharing)
Breve esempio di utilizzo di CORS per accedere ai contenuti AEM da un'applicazione Web esterna tramite JavaScript lato client. In questo esempio viene utilizzata la configurazione OSGi CORS per abilitare l’accesso CORS all’AEM. L’approccio di configurazione OSGi è fattibile quando:
- Una singola origine accede ai contenuti Publish dell’AEM
- Per l’authoring AEM è necessario l’accesso CORS
Se è richiesto l'accesso a più origini al Publish 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🔗 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 la richiesta di reverse-proxying a
aem-publish.localinlocalhost:4503è in esecuzione.
Per ulteriori dettagli, rivedi Informazioni su Cross-Origin Resource Sharing (CORS) in AEM.
www.example.com HTML e JAVASCRIPT
La logica di questa pagina Web è
- Facendo clic sul pulsante
- Invia una richiesta AJAX GET a
http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json - Recupera
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 di fabbrica OSGi
La factory di configurazione OSGi 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 Dispatcher dispatcher-configuration
Consentire le intestazioni di richiesta CORS
Per consentire alle intestazioni di richiesta HTTP di passare all'AEM per l'elaborazione, è necessario che siano consentite nella configurazione /clientheaders di Dispatcher.
/clientheaders {
...
"Origin"
"Access-Control-Request-Method"
"Access-Control-Request-Headers"
}
Memorizzazione nella cache delle intestazioni di risposta CORS
Per consentire il caching e il serving delle intestazioni CORS sul contenuto memorizzato nella cache, aggiungere la seguente configurazione /cache /headers al file AEM Publish dispatcher.any.
/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"
}
...
}
...
}
Riavviare l'applicazione server Web dopo aver apportato modifiche al file dispatcher.any.
È probabile che la cancellazione completa della cache sia necessaria per garantire che le intestazioni siano memorizzate nella cache in modo appropriato alla successiva richiesta dopo un aggiornamento della configurazione di /cache /headers.