Desenvolver para o compartilhamento de recursos entre origens (CORS)
Um exemplo breve de como utilizar o CORS para acessar conteúdo do AEM a partir de um aplicativo da web externo por meio do JavaScript do lado do cliente. Este exemplo usa a configuração de OSGi do CORS para habilitar o acesso ao CORS no AEM. A abordagem à configuração de OSGi é viável quando:
- Apenas uma origem está acessando o conteúdo do ambiente de publicação do AEM
- O acesso ao CORS é exigido pelo ambiente de criação do AEM
Se o acesso de várias origens ao ambiente de publicação do AEM for necessário, consulte esta documentação.
Neste vídeo:
- www.example.com é mapeado para o localhost via
/etc/hosts - aem-publish.local é mapeado para o localhost via
/etc/hosts - SimpleHTTPServer (um wrapper do SimpleHTTPServer](https://docs.python.org/2/library/simplehttpserver.html) de [Python) está servindo a página HTML pela porta 8000.
- Não está mais disponível na App Store do Mac. Use um recurso semelhante, como o Jeeves.
- O AEM Dispatcher está em execução no Apache HTTP Web Server 2.4 e há uma solicitação de proxy reverso de
aem-publish.localparalocalhost:4503.
Para mais detalhes, consulte Entenda o compartilhamento de recursos entre origens (CORS) no AEM.
HTML e JavaScript de www.example.com
Esta página da web segue esta lógica:
- Clicar no botão
- Cria uma solicitação AJAX GET para
http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json - Recupera o formulário
jcr:titleda resposta de JSON - Injeta o
jcr:titleno 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>
Configuração de OSGi de fábrica
A configuração de OSGi de fábrica para Cross-Origin Resource Sharing está disponível via:
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"
/>
Configuração do Dispatcher dispatcher-configuration
Permitir cabeçalhos de solicitação do CORS
Para permitir que os cabeçalhos de solicitação HTTP necessários sejam transmitidos para o AEM para processamento, eles precisam ser permitidos na configuração /clientheaders do Dispatcher.
/clientheaders {
...
"Origin"
"Access-Control-Request-Method"
"Access-Control-Request-Headers"
}
Armazenamento em cache de cabeçalhos de resposta do CORS
Para permitir o armazenamento em cache e a veiculação de cabeçalhos do CORS no conteúdo em cache, adicione a seguinte configuração /cache /headers ao arquivo dispatcher.any do ambiente de publicação do AEM.
/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"
}
...
}
...
}
Reinicie o aplicativo do servidor da web depois de fazer alterações no arquivo dispatcher.any.
Provavelmente será necessário limpar totalmente o cache para garantir que os cabeçalhos sejam armazenados em cache de maneira adequada na próxima solicitação após uma atualização da configuração /cache /headers.