为跨源资源共享(CORS)而开发
利用CORS通过客户端JavaScript从外部Web应用程序访问AEM内容的简短示例。 此示例使用CORS OSGi配置在AEM上启用CORS访问。 在以下情况下，OSGi配置方法是可行的：
- 访问AEM Publish内容的来源只有一个
- AEM创作需要CORS访问权限
如果需要对AEM Publish的多源访问，请参阅此文档。
在此视频中：
- www.example.com 通过
/etc/hosts映射到本地主机 - aem-publish.local 通过
/etc/hosts映射到本地主机 - SimpleHTTPServer （Python的SimpleHTTPServer的包装器）正在通过端口8000为HTML页提供服务。
- 在Mac App Store中不再可用。 使用类似的，如吉维斯.
- AEM Dispatcher正在Apache HTTP Web Server 2.4上运行，并且正在反向代理请求
aem-publish.local到localhost:4503。
有关详细信息，请查阅了解AEM中的跨源资源共享(CORS)。
www.example.comHTML和JavaScript
此网页的逻辑是
- 单击按钮时
- 向
http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json发出AJAX GET请求 - 从JSON响应中检索
jcr:title - 将
jcr:title注入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工厂配置
Cross-Origin Resource Sharing的OSGi配置工厂可通过以下方式使用：
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配置 dispatcher-configuration
允许CORS请求标头
要允许所需的HTTP请求标头传递到AEM进行处理，必须在Disaptcher的/clientheaders配置中允许使用这些标头。
/clientheaders {
...
"Origin"
"Access-Control-Request-Method"
"Access-Control-Request-Headers"
}
缓存CORS响应标头
要允许在缓存的内容上缓存并提供CORS标头，请将以下/cache /headers配置添加到AEM Publish dispatcher.any文件中。
/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"
}
...
}
...
}
在对dispatcher.any文件进行更改后重新启动Web服务器应用程序。
可能需要完全清除缓存，以确保在更新/cache /headers配置后的下一个请求中正确缓存标头。
支持材料 supporting-materials
-
macOS的吉夫
-
Python SimpleHTTPServer(与Windows/macOS/Linux兼容)
recommendation-more-help
c92bdb17-1e49-4e76-bcdd-89e4f85f45e6