Entwickeln für CORS (Cross-Origin Resource Sharing)
Ein kurzes Beispiel für die Nutzung von CORS zum Zugriff auf AEM-Inhalte von einer externen Web-Anwendung über Client-seitiges JavaScript. In diesem Beispiel wird die CORS OSGi-Konfiguration verwendet, um den CORS-Zugriff auf AEM zu aktivieren. Die Verwendung der OSGi-Konfiguration ist möglich, wenn:
- Eine einzige Quelle auf Inhalte von AEM Publish zugreift
- Für AEM Author ein CORS-Zugriff erforderlich ist
Wenn der Zugriff auf AEM Publish von mehreren Quellen aus erforderlich ist, lesen Sie diese Dokumentation.
In diesem Video:
- www.example.com ist localhost über
/etc/hostszugeordnet. - aem-publish.local ist localhost über
/etc/hostszugeordnet. - SimpleHTTPServer (eine Umschließung für SimpleHTTPServer](https://docs.python.org/2/library/simplehttpserver.html) in [Python) bedient die HTML-Seite über Port 8000.
- Im Mac App Store nicht mehr verfügbar. Verwenden Sie vergleichbare Alternativen wie Jeeves..
- AEM Dispatcher wird unter Apache HTTP Web Server 2.4 ausgeführt und führt einen Reverse-Proxy-Vorgang von
aem-publish.localnachlocalhost:4503aus.
Weitere Informationen finden Sie unter Grundlegendes zu CORS (Cross-Origin Resource Sharing) in AEM.
www.example.com – HTML und JavaScript
Diese Web-Seite hat folgende Logik:
- Es wird auf die Schaltfläche geklickt.
- Dadurch wird eine AJAX GET-Anfrage an
http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.jsongestellt. - Daraufhin wird
jcr:titleaus der JSON-Antwort abgerufen. - Schließlich wird
jcr:titlein das DOM eingefügt.
<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>
OSGi-Factory-Konfiguration
Die OSGi-Konfigurations-Factory für Cross-Origin Resource Sharing ist verfügbar über:
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"
/>
Konfiguration des Dispatchers dispatcher-configuration
Zulassen von CORS-Anfrage-Headern
Damit die erforderlichen HTTP-Anfrage-Header zur Verarbeitung in AEM durchgeleitet werden können, müssen sie in der /clientheaders-Konfiguration vom Dispatcher zugelassen werden.
/clientheaders {
...
"Origin"
"Access-Control-Request-Method"
"Access-Control-Request-Headers"
}
Zwischenspeichern von CORS-Anfrage-Headern
Um das Zwischenspeichern und Bereitstellen von CORS-Headern für zwischengespeicherte Inhalte zu ermöglichen, fügen Sie die folgende /cache-/headers-Konfiguration zur Datei dispatcher.any von AEM Publish hinzu.
/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"
}
...
}
...
}
Starten Sie die Webserver-Anwendung neu, nachdem Sie Änderungen an der Datei dispatcher.any vorgenommen haben.
Es ist wahrscheinlich erforderlich, den Cache vollständig zu löschen, um sicherzustellen, dass Header bei der nächsten Anfrage nach einer /cache /headers-Konfigurationsaktualisierung ordnungsgemäß zwischengespeichert werden.