DocumentatieAEMTutorials voor AEMTutorials voor AEM Foundation

Ontwikkelen voor het delen van bronnen tussen verschillende bronnen (CORS)

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Van toepassing op:
  • Experience Manager 6.4
  • Experience Manager 6.5
  • Onderwerpen:

Gemaakt voor:

  • Beginner
  • Ontwikkelaar

Een kort voorbeeld van het gebruik van CORS voor toegang tot AEM-inhoud vanuit een externe webtoepassing via client-side JavaScript. Dit voorbeeld gebruikt de configuratie CORS OSGi om de toegang van CORS op AEM toe te laten. De OSGi-configuratiebenadering is levensvatbaar wanneer:

  • Eén oorsprong benadert AEM Publish-inhoud
  • Voor AEM-auteur is CORS-toegang vereist

Als de multi-oorsprongstoegang tot AEM wordt vereist, verwijs naar dit document.

video poster

https://video.tv.adobe.com/v/18837?quality=12&learn=on

In deze video:

  • www.example.com kaarten aan localhost via /etc/hosts
  • aem-publish.local kaarten aan localhost via /etc/hosts
  • SimpleHTTPServer (een omslag voor Python SimpleHTTPServer) dient de HTML-pagina via poort 8000.
    • niet meer beschikbaar in Mac App Store. Gebruik gelijkaardig zoals Jeeves.
  • AEM Dispatcher wordt uitgevoerd op Apache HTTP Web Server 2.4 en omgekeerd-proxying request to aem-publish.local to localhost:4503 .

Voor meer details, herzie Begrijpend Middel dat van de Cross-Origin (CORS) deelt in AEM.

www.example.com HTML en JavaScript

Deze webpagina heeft de logica dat

  1. Wanneer u op de knop klikt
  2. Maakt een AJAX GET aanvraag aan http://aem-publish.local/content/we-retail/.../experience/_jcr_content.1.json
  3. Hiermee wordt de jcr:title opgehaald van het JSON-antwoord
  4. Injecteert de jcr:title in de 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-fabrieksconfiguratie

De OSGi Configuration factory for Cross-Origin Resource Sharing is beschikbaar 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-configuratie

CORS-aanvraagheaders toestaan

Om de vereiste HTTP- verzoekkopballen toe te staan om tot AEM voor verwerkingover te gaan, moeten zij in de 2} configuratie van Disaptcher worden toegestaan./clientheaders

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

CORS-responsheaders in cache plaatsen

Als u het in cache plaatsen en serveren van CORS-headers voor in cache opgeslagen inhoud wilt toestaan, voegt u de volgende /cache/headers-configuratietoe aan het AEM Publish dispatcher.any -bestand.

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

herstart de toepassing van de Webserver na het aanbrengen van veranderingen in het dispatcher.any dossier.

Het is waarschijnlijk dat het cachegeheugen volledig moet worden gewist om ervoor te zorgen dat de koppen op de juiste wijze in het cachegeheugen worden opgeslagen op het volgende verzoek na een /cache /headers configuratieupdate.

Ondersteunende materialen

  • Jeeves voor macOS

  • Python SimpleHTTPServer(compatibel Windows/macOS/Linux)

  • Werken met het delen van bronnen tussen verschillende oorsprong (CORS) in AEM

  • het Delen van het Middel van de dwars-Oorsprong (W3C)

  • Controle van de Toegang van HTTP (Mozilla MDN)

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