AEM Headless-SPA-Bereitstellungen

AEM Headless-Single-Page-App (SPA)-Bereitstellungen beinhalten JavaScript-basierte, mit Frameworks wie React oder Vue erstellte Anwendungen, die Inhalte in AEM auf Headless-Weise nutzen und damit interagieren.

Wenn Sie eine SPA bereitstellen, die mit AEM auf Headless-Weise AEM interagiert, wird die SPA gehostet und über einen Webbrowser zugänglich gemacht.

Hosten der SPA

Eine SPA besteht aus einer Sammlung nativer Web-Ressourcen: HTML, CSS und JavaScript. Diese Ressourcen werden während des Build-Prozesses generiert (z. B. npm run build) und in einem Host für die Verwendung durch Endbenutzende implementiert.

Es gibt verschiedene Hosting-Optionen entsprechend den Anforderungen Ihrer Organisation:

Cloud-Anbieterfirmen wie Azure oder AWS.
On-Premise-Hosting im Datenzentrum eines Unternehmens
Frontend-Hosting-Plattformen wie AWS Amplify, Azure App Service, Netlify, Heroku, Vercel usw.

Implementierungskonfigurationen

Beim Hosten einer SPA, die mit AEM Headless interagiert, sollten Sie vor allem berücksichtigen, ob der Zugriff auf die SPA über eine Domain (oder einen Host) von AEM oder über eine andere Domain erfolgt. Der Grund dafür ist, dass SPA-Webanwendungen in Webbrowsern ausgeführt werden und daher Sicherheitsrichtlinien für Webbrowser unterliegen.

Freigegebene Domain

Eine SPA und AEM teilen Domains, wenn beide von Endbenutzenden von derselben Domain aufgerufen werden. Beispiel:

Der Zugriff auf AEM erfolgt über: https://wknd.site/
SPA ist zugänglich über https://wknd.site/spa

Da sowohl AEM als auch die SPA von derselben Domain aus aufgerufen werden, ermöglichen Webbrowser der SPA, ohne Erforderlichkeit von CORS XHR zu AEM Headless-Endpunkten zu machen, und erlauben die Freigabe von HTTP-Cookies (z. B. des login-token-Cookies von AEM).

Wie SPA und AEM-Traffic auf der geteilten Domain geleitet werden, liegt an Ihnen: CDN mit mehreren Ursprüngen, HTTP-Server mit Reverse-Proxy, Hosten der SPA direkt in AEM usw.

Im Folgenden finden Sie Implementierungskonfigurationen, die für SPA-Implementierungen in Produktionsumgebungen erforderlich sind, wenn sie auf derselben Domain wie AEM gehostet wird.

SPA stellt eine Verbindung her zu	AEM Author	AEM Publish	AEM-Vorschau
Dispatcher-Filter	✘	✔	✔
Cross-Origin Resource Sharing (CORS)	✘	✘	✘
AEM-Hosts	✘	✘	✘

Verschiedene Domains

Eine SPA und AEM haben unterschiedliche Domains, wenn Endbenutzende von abweichenden Domains aus auf sie zugreifen. Beispiel:

Der Zugriff auf AEM erfolgt über: https://wknd.site/
SPA ist zugänglich über https://wknd-app.site/

Da auf AEM und die SPA von verschiedenen Domains aus zugegriffen wird, erzwingen Webbrowser Sicherheitsrichtlinien wie Cross-Origin Resource Sharing (CORS) und unterbinden die Freigabe von HTTP-Cookies (z. B. des login-token-Cookies von AEM).

Im Folgenden finden Sie Implementierungskonfigurationen, die für SPA-Implementierungen in Produktionsumgebungen erforderlich sind, wenn sie auf einer anderen Domain gehostet werden als AEM.

SPA stellt eine Verbindung her zu	AEM Author	AEM Publish	AEM-Vorschau
Dispatcher-Filter	✘	✔	✔
Cross-Origin Resource Sharing (CORS)	✔	✔	✔
AEM-Hosts	✔	✔	✔

Beispiel für eine SPA-Implementierung auf verschiedenen Domains

In diesem Beispiel wird die SPA in eine Netlify-Domain implementiert (https://main--sparkly-marzipan-b20bf8.netlify.app/) und die SPA verwendet AEM GraphQL-APIs aus der AEM Publish-Domain (https://publish-p65804-e666805.adobeaemcloud.com). In den folgenden Screenshots wird die CORS-Anforderung hervorgehoben.

Die SPA wird von einer Netlify-Domain bereitgestellt, führt jedoch einen XHR-Aufruf an AEM GraphQL-APIs in einer anderen Domain durch. Diese Site-übergreifende Anforderung erfordert die Festlegung von CORS auf AEM, um die Anfrage der Netlify-Domain zu genehmigen, den Zugriff auf ihren Inhalt zu ermöglichen.
Bei Überprüfung der XHR-Anfrage an die AEM GraphQL-API ist Access-Control-Allow-Origin vorhanden, was dem Webbrowser anzeigt, dass AEM Anfragen von dieser Netlify-Domain den Zugriff auf seinen Inhalt erlaubt.

Wenn AEM-CORS fehlt oder die Netlify-Domain nicht enthält, schlägt die XHR-Anfrage durch den Webbrowser fehl und er meldet einen CORS-Fehler.