Sviluppo per la condivisione CORS (Cross-Origin Resource Sharing)
- Si applica a:
- Experience Manager 6.4
- Experience Manager 6.5
Creato per:
- Principiante
- Sviluppatore
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 AEM Publish
- Per AEM Author è necessario l’accesso a CORS
Se è necessario l'accesso multiorigine 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🔗 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
Consentire le intestazioni di richiesta CORS
Per consentire alle intestazioni di richiesta HTTP di passare ad AEM per l'elaborazione, devono essere 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, aggiungi la seguente configurazione /cache /headers al file dispatcher.any di pubblicazione di 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"
}
...
}
...
}
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.