CORS(원본 간 리소스 공유)를 위한 개발

활용 사례 CORS 클라이언트측 JavaScript를 통해 외부 웹 애플리케이션에서 AEM 컨텐츠에 액세스할 수 있습니다.

이 비디오에서는:

  • www.example.com 를 통해 localhost에 매핑 /etc/hosts
  • aem-publish.local 를 통해 localhost에 매핑 /etc/hosts
  • SimpleHTTPServer(용 래퍼) Python의 SimpleHTTPServer)이 포트 8000을 통해 HTML 페이지를 제공하고 있습니다.
    • Mac App Store에서 더 이상 사용할 수 없습니다. 다음과 유사한 사용 Jeeves.
  • AEM Dispatcher 실행 중입니다. Apache HTTP Web Server 2.4 및 역방향 프록싱 요청 aem-publish.local to localhost:4503.

자세한 내용은 AEM의 CORS(원본 간 리소스 공유) 이해.

www.example.com HTML 및 JavaScript

이 웹 페이지에는

  1. 버튼을 클릭하면
  2. 만들기 AJAX GET 요청 http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json
  3. 를 검색합니다. jcr:title JSON 응답 양식
  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 공장 구성

에 대한 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 Publish 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"
  }
  ...
}

웹 서버 응용 프로그램을 다시 시작합니다 변경한 후 dispatcher.any 파일.

따라서 다음 요청 이후에 헤더가 적절하게 캐시되도록 하려면 캐시를 완전히 지우는 것이 필요할 수 있습니다. /clientheaders 구성 업데이트.

지원 자료

이 페이지에서는