開發跨原始資源共用(CORS)

運用CORS透過使用者端JavaScript從外部Web應用程式存取AEM內容的簡短範例。 此範例使用CORS OSGi設定在AEM上啟用CORS存取。 OSGi設定方法適用於以下情況:

  • 單一來源正在存取AEM Publish內容
  • AEM Author需要CORS存取權

如果需要對AEM Publish的多來源存取,請參閱此檔案

在本影片中:

  • www.example.com ​透過/etc/hosts對應至localhost
  • aem-publish.local ​透過/etc/hosts對應至localhost
  • 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.comHTML與JavaScript

此網頁的邏輯如下

  1. 按一下按鈕時
  2. http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json提出AJAX GET要求
  3. 從JSON回應中擷取jcr:title
  4. 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 Configuration Factory可透過以下方式取得:

  • 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

recommendation-more-help
c92bdb17-1e49-4e76-bcdd-89e4f85f45e6