Ontwikkelen voor het delen van bronnen tussen verschillende bronnen (CORS)
Een kort voorbeeld van het gebruik van CORS voor toegang tot AEM inhoud van een externe webtoepassing via client-side JavaScript. Dit voorbeeld gebruikt de configuratie CORS OSGi om de toegang van CORS op AEM toe te laten. De OSGi-configuratiebenadering is levensvatbaar wanneer:
- Eén herkomst heeft toegang tot AEM Publish-inhoud
- Toegang tot CORS is vereist voor AEM auteur
Als multi-oorsprongstoegang tot AEM Publish wordt vereist, verwijs naar dit document.
In deze video:
- www.example.com kaarten aan localhost via
/etc/hosts - aem-publish.local kaarten aan localhost via
/etc/hosts - SimpleHTTPServer (een omslag voor Python SimpleHTTPServer) dient de pagina van de HTML via haven 8000.
- niet meer beschikbaar in Mac App Store. Gebruik gelijkaardig zoals Jeeves.
- AEM Dispatcher wordt uitgevoerd op Apache HTTP Web Server 2.4 en omgekeerd-proxying request to
aem-publish.localtolocalhost:4503.
Voor meer details, herzie Begrijpend Middel dat van de Cross-Origin (CORS) in AEMdeelt.
www.example.com HTML en JavaScript
Deze webpagina heeft de logica dat
- Wanneer u op de knop klikt
- Maakt een AJAX GET aanvraag aan
http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json - Hiermee wordt de
jcr:titleopgehaald van het JSON-antwoord - Injecteert de
jcr:titlein de 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>
OSGi-fabrieksconfiguratie
De OSGi Configuration factory for Cross-Origin Resource Sharing is beschikbaar via:
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"
/>
Dispatcher-configuratie dispatcher-configuration
CORS-aanvraagheaders toestaan
Om de vereiste HTTP- verzoekkopballen toe te staan om tot AEM voor verwerkingover te gaan, moeten zij in de 2} configuratie van Disaptcher worden toegestaan./clientheaders
/clientheaders {
...
"Origin"
"Access-Control-Request-Method"
"Access-Control-Request-Headers"
}
CORS-responsheaders in cache plaatsen
Om het in cache plaatsen en het dienen van kopballen CORS op caching inhoud toe te staan, voeg het volgende toe/cache /headers configuratieaan het AEM Publish dispatcher.any dossier.
/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"
}
...
}
...
}
herstart de toepassing van de Webserver na het aanbrengen van veranderingen in het dispatcher.any dossier.
Het is waarschijnlijk dat het cachegeheugen volledig moet worden gewist om ervoor te zorgen dat de koppen op de juiste wijze in het cachegeheugen worden opgeslagen op het volgende verzoek na een /cache /headers configuratieupdate.