AEM SPA Implementaciones de Headless
AEM SPA AEM Las implementaciones de aplicación de una sola página () sin encabezado implican aplicaciones basadas en JavaScript creadas con marcos de trabajo como React o Vue, que consumen e interactúan con el contenido en forma de interfaz de usuario sin encabezado.
SPA AEM SPA La implementación de un que interactúe de manera sin encabezado implica alojar el y hacer que sea accesible a través de un explorador web.
SPA Host de la
SPA Una consta de una colección de recursos web nativos: HTML, CSS y JavaScript. Estos recursos se generan durante la generar proceso (por ejemplo, npm run build) e implementado en un host para que lo consuman los usuarios finales.
Hay varios hosting opciones según los requisitos de su organización:
-
Proveedores de nube como Azure o AWS.
-
On-Premise hosting en una empresa centro de datos
-
Plataformas de alojamiento front-end como AWS Amplify, Azure App Service, Netlify, Heroku, Vercel, etc.
Configuraciones de implementación
SPA AEM SPA AEM La consideración principal al alojar una que interactúa con sin encabezado es si se accede a la a través de un dominio (o host) de la aplicación o en un dominio diferente. SPA El motivo es que las aplicaciones web se ejecutan en exploradores web y, por lo tanto, están sujetas a las políticas de seguridad de los exploradores web.
Dominio compartido
SPA AEM Un dominio compartido de y cuando ambos son acceso para usuarios finales del mismo dominio. Por ejemplo:
- AEM Se accede a la a través de:
https://wknd.site/ - SPA se accede a la a través de
https://wknd.site/spa
AEM SPA SPA AEM AEM Dado que se accede a las dos, la y la, desde el mismo dominio, los exploradores web permiten al usuario realizar XHR en puntos finales sin encabezado sin necesidad de CORS y permiten el uso compartido de cookies HTTP (como las cookies de HTTP), lo que permite al usuario realizar un seguimiento de los puntos finales sin encabezado, sin necesidad de usar CORS, y permitir el uso compartido de las cookies HTTP (como las de los navegadores web), lo que permite el uso compartido de las cookies de HTTP (por ejemplo, las de los navegadores web login-token cookie).
SPA AEM SPA AEM Depende de usted cómo se enrute el tráfico de la y la en el dominio compartido: CDN con varios orígenes, servidor HTTP con proxy inverso, alojamiento de la directamente en el dominio compartido, etc.
SPA AEM A continuación, se indican las configuraciones de implementación necesarias para implementaciones de producción de la, cuando se hospedan en el mismo dominio que las implementaciones de.
Dominios diferentes
SPA AEM Un y un dominio tienen dominios diferentes cuando los usuarios finales de un dominio diferente acceden a ellos. Por ejemplo:
- AEM Se accede a la a través de:
https://wknd.site/ - SPA se accede a la a través de
https://wknd-app.site/
AEM SPA Dado que se accede a los y a los recursos desde dominios diferentes, los exploradores web aplican políticas de seguridad como las siguientes Intercambio de recursos de origen cruzado (CORS)AEM e impedir que se compartan cookies HTTP (como las cookies de login-token cookie).
SPA AEM A continuación, se indican las configuraciones de implementación necesarias para implementaciones de producción de la, cuando se aloja en un dominio diferente al de la ubicación de la aplicación.
SPA Implementación de ejemplo en dominios diferentes
SPA En este ejemplo, el se implementa en un dominio Netlify (https://main--sparkly-marzipan-b20bf8.netlify.app/SPA AEM ) y la consume API de GraphQL AEM de la Publish (https://publish-p65804-e666805.adobeaemcloud.com). Las siguientes capturas de pantalla resaltan el requisito CORS.
-
SPA AEM El se sirve desde un dominio de Netlify, pero realiza una llamada XHR a las API de GraphQL de la en un dominio diferente. Esta solicitud entre sitios requiere CORS AEM que se debe configurar en la para permitir que la solicitud del dominio de Netlify acceda a su contenido.
-
AEM Al inspeccionar la solicitud XHR a la API de GraphQL de la, el
Access-Control-Allow-OriginAEM está presente, lo que indica al navegador web que permite que las solicitudes de este dominio de Netlify accedan a su contenido.AEM Si el valor de CORS faltaba o no incluía el dominio Netlify, el navegador web fallaría la solicitud XHR e informaría de un error CORS.
Ejemplo de aplicación de una sola página
El Adobe proporciona un ejemplo de aplicación de una sola página codificada en React.
AEM Aplicación de ejemplo de una sola página, escrita en React, que consume contenido de las API de GraphQL sin encabezado, sin encabezado, que se utilizan para la creación de contenido.
AEM Aplicación de ejemplo de una sola página, escrita en Next.js, que consume contenido de las API de GraphQL sin encabezado de la aplicación de la interfaz de usuario sin encabezado.