원본 간 리소스 공유(CORS) 개발
클라이언트측 JavaScript를 통해 외부 웹 애플리케이션에서 AEM 콘텐츠에 액세스하기 위해 CORS를 활용하는 간단한 예시입니다. 이 예시에서는 CORS OSGi 구성을 사용하여 AEM에서 CORS 액세스를 활성화합니다. 다음과 같은 경우 OSGi 구성 방식이 적합합니다.
- 단일 출처에서 AEM 게시 콘텐츠에 액세스하는 경우
- AEM 작성자 인스턴스에서 CORS 액세스가 필요한 경우
AEM 게시 인스턴스에 대한 다중 출처 액세스가 필요한 경우에는 이 설명서를 참조하십시오.
이 비디오에서는 다음 내용을 다룹니다.
- 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
이 웹 페이지에는 다음과 같은 논리가 포함되어 있습니다.
- 버튼 클릭 시
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 헤더의 캐싱 및 제공을 허용하려면 다음 /cache /headers 구성을 AEM 게시 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
-
Python SimpleHTTPServer(Windows/macOS/Linux 호환)
recommendation-more-help
c92bdb17-1e49-4e76-bcdd-89e4f85f45e6