설명서AEMAEM 튜토리얼AEM Foundation 튜토리얼

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

작성 대상:

  • 초급
  • 개발자

클라이언트측 JavaScript을 통해 외부 웹 애플리케이션에서 AEM 콘텐츠에 액세스하는 데 CORS을(를) 활용하는 간단한 예입니다. 이 예에서는 CORS OSGi 구성을 사용하여 AEM에서 CORS 액세스를 활성화합니다. OSGi 구성 접근 방식은 다음과 같은 경우에 실행 가능합니다.

  • 단일 원본이 AEM Publish 콘텐츠에 액세스하고 있습니다.
  • AEM 작성자에게는 CORS 액세스 권한이 필요합니다.

AEM Publish에 대한 다중 원본 액세스가 필요한 경우 이 설명서를 참조하세요.

https://video.tv.adobe.com/v/18837?quality=12&learn=on

이 비디오에서:

  • 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.com HTML 및 JavaScript

이 웹 페이지에는 다음과 같은 논리가 있습니다

  1. 버튼을 클릭하면
  2. http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json에 AJAX GET 요청
  3. JSON 응답에서 jcr:title을(를) 검색합니다.
  4. 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에 전달되도록하려면 Dispatcher의 /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 파일을 변경한 후 웹 서버 응용 프로그램을 다시 시작 ​합니다.

/cache /headers 구성 업데이트 후 다음 요청에서 헤더가 적절하게 캐시되도록 하려면 캐시를 완전히 지워야 할 수 있습니다.

지원 자료 supporting-materials

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