Desenvolver para o CORS (Cross-Origin Resource Sharing, Compartilhamento de recursos entre origens)

Um pequeno exemplo de aproveitamento CORS para acessar o conteúdo AEM de um aplicativo web externo por meio do JavaScript do lado do cliente. Este exemplo usa a configuração OSGi do CORS para habilitar o acesso do CORS no AEM. A abordagem de configuração do OSGi é viável quando:

  • Uma única origem está acessando o conteúdo de publicação do AEM
  • O acesso ao CORS é necessário para o AEM Author

Se o acesso de várias origens ao AEM Publish for necessário, consulte esta documentação.

Neste vídeo:

  • www.example.com mapeia para o host local via /etc/hosts
  • aem-publish.local mapeia para o host local via /etc/hosts
  • SimpleHTTPServer (um invólucro para PythonSimpleHTTPServer do) está atendendo a página de HTML pela porta 8000.
    • Não está mais disponível no Mac App Store. Usar semelhante, como Jeeves.
  • AEM Dispatcher está em execução em Apache HTTP Web Server 2.4 e solicitação de proxy reverso para aem-publish.local para localhost:4503.

Para obter mais detalhes, consulte Compreensão do CORS (Cross-Origin Resource Sharing, Compartilhamento de recursos entre origens) no AEM.

www.example.com HTML e JavaScript

Esta página da Web tem lógica de que

  1. Ao clicar no botão
  2. Cria um AJAX GET solicitação para http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json
  3. Recupera o jcr:title da resposta JSON
  4. Injeta o jcr:title no 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 fábrica do OSGi

A fábrica de configuração do OSGi 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

Permitir cabeçalhos de solicitação CORS

Para permitir as Cabeçalhos de solicitação HTTP para transmitir ao AEM para processamento, eles devem ter permissão no do Dispatcher /clientheaders configuração.

/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 CORS no conteúdo em cache, adicione o seguinte /cache /configuração de cabeçalhos ao AEM Publish dispatcher.any arquivo.

/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"
        }
    ...
    }
...
}

Reiniciar o aplicativo do servidor Web depois de fazer alterações no dispatcher.any arquivo.

Provavelmente, é necessário limpar totalmente o cache para garantir que os cabeçalhos sejam armazenados em cache corretamente na próxima solicitação após um /cache /headers atualização de configuração.

Materiais de suporte

Nesta página