クロスオリジンリソース共有 (CORS) 用の開発

活用の短い例 CORS クライアント側 JavaScript を使用して、外部 Web アプリケーションからAEMコンテンツにアクセスする。

このビデオでは、

www.example.com はを介して localhost にマッピングされます。 /etc/hosts
aem-publish.local はを介して localhost にマッピングされます。 /etc/hosts
SimpleHTTPServer ( Python's SimpleHTTPServer) は、ポート 8000 を介してHTMLページを提供します。
- Mac App Storeでは使用できなくなりました。次のような類似のを使用します。ジーブス.
AEM Dispatcher 実行中 Apache HTTP Web Server 2.4.に対するリバースプロキシ要求 aem-publish.local から localhost:4503.

www.example.comHTMLと JavaScript

この Web ページには

「」ボタンをクリックしたとき
を AJAX GET ～を要求する http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json
を取得します。 jcr:title JSON 応答を形成する
を挿入します。 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 ファクトリ設定

の OSGi 設定ファクトリ Cross-Origin Resource Sharing は、次の場所から使用できます。

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 設定

キャッシュされたコンテンツでの CORS ヘッダーのキャッシュと提供を許可するには、以下を追加します。 /clientheaders 設定を、AEM パブリッシュをサポートするすべての dispatcher.any ファイル。

/cache {
  ...
  /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"
  }
  ...
}

Web サーバーアプリケーションを再起動します 変更後 dispatcher.any ファイル。

キャッシュを完全にクリアする必要が生じる可能性があります。これは、 /clientheaders 設定を更新しました。