クロスオリジンリソース共有（CORS）に対応する開発
CORS を活用して、クライアントサイド JavaScript で外部 web アプリケーションから AEM コンテンツにアクセスする簡単な例です。この例では、CORS OSGi 設定を使用して、AEM での CORS アクセスを有効にします。OSGi 設定アプローチは、次の場合に有効です。
- 単一オリジンが AEM パブリッシュコンテンツにアクセスしている
- AEM オーサーには CORS アクセスが必要である
AEM パブリッシュへのマルチオリジンアクセスが必要な場合は、このドキュメントを参照してください。
このビデオの内容は次のとおりです。
- www.example.com が
/etc/hostsを介してローカルホストにマッピングされます。 - aem-publish.local が
/etc/hostsを介してローカルホストにマッピングされます。 - SimpleHTTPServer（Python の SimpleHTTPServer のラッパー）がポート 8000 で HTML ページを提供しています。
- Mac App Store では入手できなくなりました。Jeeves など、類似のものを使用します。
- AEM Dispatcher が Apache HTTP Web Server 2.4 で動作しており、
aem-publish.localへのリクエストをlocalhost:4503にリバースプロキシしています。
詳しくは、AEM でのクロスオリジンリソース共有（CORS）についてを参照してください。
www.example.com の HTML と JavaScript
この web ページには、次のようなロジックがあります。
- ボタンのクリック時に、
http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.jsonに対して AJAX GET リクエストを実行します。- JSON 応答から
jcr:titleフォームを取得します。 - DOM に
jcr:titleを挿入します。
<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 ヘッダーをキャッシュし提供できるようにするには、AEM パブリッシュの dispatcher.any ファイルに次の /cache /headers 設定を追加します。
/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
-
Python SimpleHTTPServer（Windows／macOS／Linux 対応）
recommendation-more-help
c92bdb17-1e49-4e76-bcdd-89e4f85f45e6