A short example of leveraging CORS to access AEM content from an external web application via client-side JavaScript.
In this video:
/etc/hosts
/etc/hosts
aem-publish.local
to localhost:4503
.For more details, review Understanding Cross-Origin Resource Sharing (CORS) in AEM.
This Web page has logic that
http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json
jcr:title
form the JSON responsejcr:title
into the 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>
The OSGi Configuration factory for Cross-Origin Resource Sharing is available 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"
/>
To allow the caching and serving of CORS headers on cached content, add following /clientheaders configuration to all supporting AEM Publish dispatcher.any
files.
/myfarm {
...
/clientheaders {
"Access-Control-Allow-Origin"
"Access-Control-Expose-Headers"
"Access-Control-Max-Age"
"Access-Control-Allow-Credentials"
"Access-Control-Allow-Methods"
"Access-Control-Allow-Headers"
}
...
}
Restart the web server application after making changes to the dispatcher.any
file.
It is likely clearing the cache entirely is required to ensure headers are appropriately cached on the next request after a /clientheaders
configuration update.
AEM OSGi Configuration factory for Cross-Origin Resource Sharing Policies
Python SimpleHTTPServer (Windows/macOS/Linux compatible)