Le partage des ressources cross-origin (CORS) d’Adobe Experience Manager as a Cloud Service facilite les propriétés web non AEM pour effectuer des appels côté client basés sur un navigateur vers AEM API GraphQL.
Les configurations suivantes sont des exemples. Veillez à les ajuster pour qu’elles s’alignent sur les exigences de votre projet.
La norme CORS est requise pour les connexions basées sur un navigateur aux API GraphQL d’AEM, lorsque le client se connectant à AEM n’est PAS diffusé à partir de la même origine (également appelée hôte ou domaine) que l’.
Type de client | Application d’une seule page (SPA) | Composant Web/JS | Mobile | Serveur à serveur |
---|---|---|---|---|
Configuration CORS requise | ✔ | ✔ | ✘ | ✘ |
La fabrique de configuration OSGi d’AEM CORS définit les critères d’autorisation pour accepter les requêtes HTTP CORS.
Le client se connecte à | Auteur AEM | Publication AEM | Aperçu AEM |
---|---|---|---|
Nécessite une configuration OSGi CORS | ✔ | ✔ | ✔ |
L’exemple ci-dessous définit une configuration OSGi pour AEM Publish (../config.publish/..
), mais peuvent être ajoutés à tout dossier de mode d’exécution pris en charge.
Les propriétés de configuration des clés sont les suivantes :
alloworigin
et/ou alloworiginregexp
spécifie les origines sur lesquelles le client se connecte à AEM web s’exécute.allowedpaths
spécifie les modèles de chemin d’URL autorisés à partir des origines spécifiées.
/graphql/execute.json.*
/content/experience-fragments/.*
supportedmethods
spécifie les méthodes HTTP autorisées pour les requêtes CORS. Ajouter GET
, pour prendre en charge AEM requêtes persistantes GraphQL (et les fragments d’expérience).En savoir plus sur la configuration OSGi CORS.
Cet exemple de configuration prend en charge l’utilisation AEM requêtes persistantes GraphQL. Pour utiliser des requêtes GraphQL définies par le client, ajoutez une URL de point de terminaison GraphQL dans allowedpaths
et POST
to supportedmethods
.
/ui.config/src/main/content/jcr_root/apps/wknd-examples/osgiconfig/config.publish/com.adobe.granite.cors.impl.CORSPolicyImpl~graphql.cfg.json
{
"alloworigin":[
"https://spa.external.com/"
],
"alloworiginregexp":[
"http://localhost:.*"
],
"allowedpaths": [
"/graphql/execute.json.*",
"/content/experience-fragments/.*"
],
"supportedheaders": [
"Origin",
"Accept",
"X-Requested-With",
"Content-Type",
"Access-Control-Request-Method",
"Access-Control-Request-Headers"
],
"supportedmethods":[
"GET",
"HEAD",
"OPTIONS"
],
"maxage:Integer": 1800,
"supportscredentials": false,
"exposedheaders":[ "" ]
}
Lors de l’accès aux API GraphQL d’AEM qui nécessitent une autorisation (généralement l’auteur AEM ou le contenu protégé sur AEM Publish), assurez-vous que la configuration OSGi CORS comporte les valeurs supplémentaires :
supportedheaders
également des listes "Authorization"
supportscredentials
est défini sur true
Les requêtes autorisées envoyées aux API GraphQL AEM qui nécessitent une configuration CORS sont inhabituelles, car elles se produisent généralement dans le contexte de applications serveur à serveur et ne nécessitent donc pas de configuration CORS. Applications basées sur un navigateur qui nécessitent des configurations CORS, telles que applications d’une seule page ou Composants web, utilisez généralement l’autorisation, car il est difficile de sécuriser les informations d’identification .
Par exemple, ces deux paramètres sont définis comme suit dans une CORSPolicyImpl
Configuration d’usine OSGi :
/ui.config/src/main/content/jcr_root/apps/wknd-examples/osgiconfig/config/com.adobe.granite.cors.impl.CORSPolicyImpl~graphql.cfg.json
{
...
"supportedheaders": [
"Origin",
"Accept",
"X-Requested-With",
"Content-Type",
"Access-Control-Request-Method",
"Access-Control-Request-Headers",
"Authorization"
],
...
"supportscredentials": true,
...
}
Le Dispatcher du service AEM Publish (et Preview) doit être configuré pour prendre en charge CORS.
Le client se connecte à | Auteur AEM | Publication AEM | Aperçu AEM |
---|---|---|---|
Nécessite une configuration CORS de Dispatcher | ✘ | ✔ | ✔ |
Mettez à jour le clientheaders.any
pour autoriser les en-têtes de requête HTTP Origin
, Access-Control-Request-Method
, et Access-Control-Request-Headers
à être transmis à AEM, ce qui permet à la requête HTTP d’être traitée par la variable Configuration AEM CORS.
dispatcher/src/conf.dispatcher.d/clientheaders/clientheaders.any
# Allowing CORS headers to be passed through to the publish tier to support headless and SPA Editor use cases.
# https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_request_headers
"Origin"
"Access-Control-Request-Method"
"Access-Control-Request-Headers"
$include "./default_clientheaders.any"
Configuration de la ferme de serveurs de Dispatcher pour le cache En-têtes de réponse HTTP CORS pour s’assurer qu’elles sont incluses lorsque AEM requêtes persistantes GraphQL sont diffusées à partir du cache de Dispatcher en ajoutant la variable Access-Control-...
en-têtes de la liste des en-têtes de cache.
dispatcher/src/conf.dispatcher.d/available_farms/wknd.farm
/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"
}
...
}
...
}