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

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

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 wrapper para PythonSimpleHTTPServer) está servindo a página HTML pela porta 8000.
    • Não está mais disponível no Mac App Store. Use semelhantes como Jeeves.
  • AEM Dispatcher está sendo executado 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 Como entender o CORS (Cross-Origin Resource Sharing, Compartilhamento de recursos entre origens) no AEM.

www.example.com HTML e JavaScript

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

  1. Ao clicar no botão
  2. Torna um AJAX GET solicitar http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json
  3. Recupera o jcr:title formulário 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 OSGi

A fábrica de Configuração OSGi para Cross-Origin Resource Sharing está disponível através de:

  • 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 o fornecimento de cabeçalhos CORS em conteúdo em cache, adicione o seguinte Configuração /clientheaders para todos os que oferecem suporte ao AEM Publish dispatcher.any arquivos.

/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 Web depois de fazer alterações no dispatcher.any arquivo.

É provável que a limpeza do cache seja totalmente necessária para garantir que os cabeçalhos sejam adequadamente armazenados em cache na próxima solicitação após uma /clientheaders atualização de configuração.

Materiais de apoio

Nesta página