La condivisione CORS (Cross-Origin Resource Sharing) di Adobe Experience Manager as a Cloud Service facilita le proprietà web non AEM a effettuare chiamate lato client basate su browser alle API AEM GraphQL.
L’articolo seguente descrive come configurare origine singola accesso a un set specifico di endpoint headless AEM tramite CORS. Origine singola significa che un solo dominio non AEM accede all’AEM, ad esempio https://app.example.com connettendosi a https://www.example.com. L’accesso multiorigine potrebbe non funzionare con questo approccio a causa di problemi di caching.
Le seguenti configurazioni sono esempi. Assicurati di regolarli per allinearli ai requisiti del progetto.
CORS è richiesto per le connessioni basate su browser alle API GraphQL dell’AEM quando il client che si connette all’AEM NON viene gestito dalla stessa origine (nota anche come host o dominio) dell’AEM.
Tipo di client | App a pagina singola (SPA) | Componente Web/JS | Mobile | Server-to-server |
---|---|---|---|---|
Richiede la configurazione CORS | ✔ | ✔ | ✘ | ✘ |
La Configuration Factory AEM CORS OSGi definisce i criteri consentiti per accettare le richieste HTTP CORS.
Il client si collega a | Autore AEM | AEM Publish | Anteprima AEM |
---|---|---|---|
Richiede la configurazione OSGi CORS | ✔ | ✔ | ✔ |
L’esempio seguente definisce una configurazione OSGi per AEM Publish (../config.publish/..
), ma può essere aggiunto a qualsiasi cartella in modalità di esecuzione supportata.
Le proprietà chiave di configurazione sono:
alloworigin
e/o alloworiginregexp
specifica le origini di esecuzione del client che si connette al Web AEM.allowedpaths
specifica i pattern di percorso URL consentiti dalle origini specificate.
/graphql/execute.json.*
/content/experience-fragments/.*
supportedmethods
specifica i metodi HTTP consentiti per le richieste CORS. Aggiungi GET
, per supportare query persistenti (e frammenti di esperienza) di AEM GraphQL.Ulteriori informazioni sulla configurazione OSGi CORS.
Questa configurazione di esempio supporta l’utilizzo di query persistenti di AEM GraphQL. Per utilizzare le query GraphQL definite dal client, aggiungi un URL dell’endpoint GraphQL in allowedpaths
e POST
a 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":[
],
"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":[ "" ]
}
Quando accedi alle API GraphQL dell’AEM che richiedono un’autorizzazione (in genere AEM Author o contenuti protetti in AEM Publish), assicurati che la configurazione OSGi CORS abbia i valori aggiuntivi:
supportedheaders
anche elenchi "Authorization"
supportscredentials
è impostato su true
Le richieste autorizzate alle API GraphQL dell’AEM che richiedono la configurazione CORS sono insolite, in quanto si verificano in genere nel contesto di applicazioni server-to-server e quindi non richiedono la configurazione CORS. App basate su browser che richiedono configurazioni CORS, ad esempio app a pagina singola o Componenti Web, in genere si utilizza l’autorizzazione in quanto è difficile proteggere le credenziali.
Ad esempio, queste due impostazioni sono impostate come segue in un CORSPolicyImpl
Configurazione di fabbrica 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,
...
}
Il Dispatcher del servizio AEM Publish (e Anteprima) deve essere configurato per supportare CORS.
Il client si collega a | Autore AEM | AEM Publish | Anteprima AEM |
---|---|---|---|
Richiede la configurazione CORS di Dispatcher | ✘ | ✔ | ✔ |
Aggiornare il clientheaders.any
per consentire le intestazioni di richiesta HTTP Origin
, Access-Control-Request-Method
, e Access-Control-Request-Headers
all'AEM, consentendo l'elaborazione della richiesta HTTP da parte del Configurazione 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"
Configurare la farm di Dispatcher per la cache Intestazioni di risposta HTTP CORS per assicurarsi che vengano inclusi quando le query persistenti di AEM GraphQL vengono servite dalla cache di Dispatcher aggiungendo Access-Control-...
nell'elenco delle intestazioni della 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"
}
...
}
...
}