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 det här exemplet används CORS OSGi-konfigurationen för att aktivera CORS-åtkomst på AEM. OSGi-konfigurationsmetoden är användbar när:

  • Ett enda ursprung är åtkomst AEM publiceringsinnehåll
  • CORS-åtkomst krävs för AEM författare

Om åtkomst till AEM publicering krävs med flera ursprung finns mer information i det här dokumentet.

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. Infogar 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 dispatcher-configuration

Tillåt CORS-begäranderubriker

För att tillåta HTTP-begäranrubriker som skickas till AEM för bearbetning, måste de vara tillåtna i Disaptcher's /clientheaders konfiguration.

/clientheaders {
   ...
   "Origin"
   "Access-Control-Request-Method"
   "Access-Control-Request-Headers"
}

Cachelagra CORS-svarshuvuden

Om du vill tillåta cachelagring och visning av CORS-huvuden i cachelagrat innehåll lägger du till följande /cache/headers konfiguration till AEM Publish dispatcher.any -fil.

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

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 /cache /headers konfigurationsuppdatering.

Stödmaterial supporting-materials

recommendation-more-help
c92bdb17-1e49-4e76-bcdd-89e4f85f45e6