Für Cross-Origin Resource Sharing (CORS) entwickeln

Ein kurzes Beispiel für die Nutzung von CORS für den Zugriff auf AEM Inhalt von einer externen Web-Anwendung über clientseitiges JavaScript.

In diesem Video:

  • www.example. commaps auf localhost via /etc/hosts
  • aem-publish. localmaps to localhost via /etc/hosts
  • SimpleHTTPServer (ein Wrapper für den SimpleHTTPServer🔗 von Python) versorgt die HTML-Seite über Port 8000.
    • Nicht mehr im Mac App Store verfügbar. Verwenden Sie Ähnliches wie Jeeves.
  • AEM Dispatcher wird in Version Apache HTTP Web Server 2.4 ausgeführt und die Anfrage zur umgekehrten Proxy aem-publish.local an localhost:4503.

Weitere Informationen finden Sie unter Informationen zur Cross-Origin Resource Sharing (CORS) in AEM.

www.example.com HTML und JavaScript

Diese Webseite weist eine Logik auf, dass

  1. Nach Klicken auf die Schaltfläche
  2. Stellt eine AJAX GET -Anfrage an http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json
  3. Ruft die jcr:title aus der JSON-Antwort ab
  4. injiziert das jcr:title in das 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>

OSGi-Werkskonfiguration

Die OSGi-Konfigurationsfactory für Cross-Origin Resource Sharing ist verfügbar über:

  • 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-Konfiguration

Um das Zwischenspeichern und Bereitstellen von CORS-Headern für zwischengespeicherten Inhalt zu ermöglichen, fügen Sie allen unterstützenden AEM Publish-Dateien dispatcher.any die folgende /clientheaders-Konfiguration hinzu.

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

Starten Sie die Webserver- Anwendung neu, nachdem Sie Änderungen an der dispatcher.any Datei vorgenommen haben.

Es ist wahrscheinlich, dass der Cache vollständig gelöscht werden muss, um sicherzustellen, dass Kopfzeilen bei der nächsten Anfrage nach einer /clientheaders-Konfigurationsaktualisierung ordnungsgemäß zwischengespeichert werden.

Unterstützende Materialien

Auf dieser Seite