CORS-Fehler treten bei persistierten Abfragen von GraphQL in AEM as a Cloud Service auf
In diesem Artikel wird erläutert, wie Sie Probleme mit fehlenden CORS-Headern bei persistierten Abfrageantworten von GraphQL in Adobe Experience Manager as a Cloud Service beheben können, wenn eine Zwischenspeicherung auf CDN-Ebene erforderlich ist.
Beschreibung description
Umgebung
- Adobe Experience Manager as a Cloud Service
- Persistente Abfragen in GraphQL
- CDN-Caching
Problem/Symptome
- Browser-CORS-Fehler treten auf, wenn ursprungsübergreifende Anfragen an GraphQL-Endpunkte für persistierte Abfragen gesendet werden.
- Bei Antworten des CDN fehlen möglicherweise erforderliche CORS-Header, sodass Anfragen aus verschiedenen Quellen fehlschlagen.
- Browser blockieren Antworten aufgrund fehlender
Access-Control-Allow-Origin-Header, was sich auf Headless- oder SPA-Integrationen auswirkt.
Ursache
Die CDN-Cache-Antworten, die die erforderlichen CORS-Header nicht enthalten, auch wenn die Zwischenspeicherung auf Dispatcher-Ebene für den Endpunkt deaktiviert ist. Sofern nicht ausdrücklich angewiesen, keine Cache-Inhalte zu speichern, kann das CDN zwischengespeicherte Antworten ohne die erforderlichen Kopfzeilen bereitstellen.
Lösung resolution
Gehen Sie wie folgt vor, um das Problem zu beheben:
-
Überprüfen Sie die Dispatcher-Konfiguration und stellen Sie sicher, dass die Zwischenspeicherung für den Endpunkt der persistierten Abfrage von GraphQL nicht aktiviert
/graphql/execute.json/*. Die Konfigurationsvariable, die dieses Verhalten steuert, wird in der RegelCACHE_GRAPHQL_PERSISTED_QUERIES. Stellen Sie sicher, dass die Variable nicht definiert oder konfiguriert ist, um das Caching für diesen Pfad zu verhindern. -
Aktualisieren Sie die Dispatcher-vhost-Konfiguration, um
mod_headerszu verwenden, und legen Sie dieCache-Control-Kopfzeile für den Endpunkt der persistierten Abfrage von GraphQL aufprivate, no-store, no-cache, must-revalidate, max-age=0fest.code language-none Header set Cache-Control "private, no-store, no-cache, must-revalidate, max-age=0" -
Wenden Sie die Konfigurationsänderungen an und laden Sie den Dispatcher-Service neu oder starten Sie ihn neu.
-
Testen Sie den Endpunkt der persistierten Abfrage von GraphQL, indem Sie eine Anfrage senden, die eine
Origin-Kopfzeile enthält. -
Vergewissern Sie sich, dass die Antwort die erwartete
Access-Control-Allow-Origin-Kopfzeile enthält. -
Vergewissern Sie sich, dass der
x-cache-Antwort-HeaderMISSanstelle vonHITzurückgibt und so bestätigt, dass die Antwort nicht aus dem CDN-Cache bereitgestellt wird. -
Überprüfen Sie die Konfiguration der AEM-CORS-Richtlinie und stellen Sie sicher, dass
com.adobe.granite.cors.impl.CORSPolicyImplso konfiguriert ist, dass die erforderlichen Ursprünge für den Endpunkt zulässig sind. -
Wenn das CDN bereits eine Antwort zwischengespeichert hat, die die erforderliche CORS-Kopfzeile nicht enthält, löschen oder invalidieren Sie den Cache für den betroffenen Endpunkt, um sicherzustellen, dass nachfolgende Anfragen die richtigen Kopfzeilen erhalten.
-
Überprüfen Sie, ob Anfragen an den Endpunkt der persistierten Abfrage von GraphQL die erwarteten CORS-Header zurückgeben und erfolgreich verarbeitet wurden.