Ontwikkelen voor het delen van bronnen tussen verschillende bronnen (CORS)
Een kort voorbeeld van het gebruik van CORS voor toegang tot AEM-inhoud vanuit 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 oorsprong benadert AEM Publish-inhoud
- Voor AEM-auteur is CORS-toegang vereist
Als de multi-oorsprongstoegang tot AEM 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 HTML-pagina via poort 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) deelt in AEM.
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
Als u het in cache plaatsen en serveren van CORS-headers voor in cache opgeslagen inhoud wilt toestaan, voegt u de volgende /cache/headers-configuratietoe aan het AEM Publish dispatcher.any -bestand.
/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.