Utveckla för Cross-Origin Resource Sharing (CORS)

Ett kort exempel på hur man utnyttjar CORS för att komma åt AEM från ett externt webbprogram via JavaScript på klientsidan.

I den här videon:

  • www.example.com mappar till localhost via /etc/hosts
  • aem-publish.local mappar till localhost via /etc/hosts
  • SimpleHTTPServer (en wrapper för Python's SimpleHTTPServer) serverar HTML via port 8000.
    • Finns inte längre i Mac App Store. Använd liknande Jeeves.
  • AEM Dispatcher körs på Apache HTTP Web Server 2.4 och begäran om omvänd proxering till aem-publish.local till localhost:4503.

Mer information finns på Understanding Cross-Origin Resource Sharing (CORS) in AEM.

www.example.com HTML och JavaScript

Den här webbsidan har logik för att

  1. När du klickar på knappen
  2. Gör en AJAX GET begäran till http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json
  3. Hämtar jcr:title från JSON-svaret
  4. Injicerar jcr:title till 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-fabrikskonfiguration

OSGi Configuration factory för Cross-Origin Resource Sharing är tillgängligt 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"
/>

Dispatcher-konfiguration

Om du vill tillåta cachelagring och visning av CORS-huvuden i cachelagrat innehåll lägger du till följande /clientheaders-konfiguration till alla AEM Publish som stöds dispatcher.any filer.

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

Starta om webbserverprogrammet efter att ha ändrat dispatcher.any -fil.

Det är troligt att cache-minnet måste rensas helt för att huvuden ska kunna cachas korrekt på nästa begäran efter en /clientheaders konfigurationsuppdatering.

Stödmaterial

På denna sida