Desenvolver para o CORS (Cross-Origin Resource Sharing, compartilhamento de recursos de várias origens)

Um exemplo curto de como aproveitar CORS para acessar AEM conteúdo de um aplicativo Web externo por meio do JavaScript do lado do cliente.

Neste vídeo:

  • www.example. commaps to localhost via /etc/hosts
  • aem-publish. localmaps to localhost via /etc/hosts
  • SimpleHTTPServer (um wrapper para o SimpleHTTPServer Python) está promovendo a página HTML pela porta 8000.
    • Não está mais disponível na Mac App Store. Use semelhantes, como Jeeves.
  • AEM Dispatcher O está em execução na Apache HTTP Web Server 2.4 e a solicitação de proxy reverso aem-publish.local para localhost:4503.

Para obter mais detalhes, consulte Compreender o CORS (Cross-Origin Resource Sharing) em AEM.

www.example.com HTML e JavaScript

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

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

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

Para permitir o armazenamento em cache e a veiculação de cabeçalhos CORS em conteúdo em cache, adicione a seguir /clientheaders configuration a todos os arquivos dispatcher.any de publicação do AEM de suporte.

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

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

Provavelmente, a limpeza total do cache é necessária para garantir que os cabeçalhos sejam armazenados em cache adequadamente na próxima solicitação após uma atualização de configuração /clientheaders.

Materiais de apoio

Nesta página