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:

  1. Ü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 Regel CACHE_GRAPHQL_PERSISTED_QUERIES. Stellen Sie sicher, dass die Variable nicht definiert oder konfiguriert ist, um das Caching für diesen Pfad zu verhindern.

  2. Aktualisieren Sie die Dispatcher-vhost-Konfiguration, um mod_headers zu verwenden, und legen Sie die Cache-Control-Kopfzeile für den Endpunkt der persistierten Abfrage von GraphQL auf private, no-store, no-cache, must-revalidate, max-age=0 fest.

    code language-none
    Header set Cache-Control "private, no-store, no-cache, must-revalidate, max-age=0"
    
  3. Wenden Sie die Konfigurationsänderungen an und laden Sie den Dispatcher-Service neu oder starten Sie ihn neu.

  4. Testen Sie den Endpunkt der persistierten Abfrage von GraphQL, indem Sie eine Anfrage senden, die eine Origin-Kopfzeile enthält.

  5. Vergewissern Sie sich, dass die Antwort die erwartete Access-Control-Allow-Origin-Kopfzeile enthält.

  6. Vergewissern Sie sich, dass der x-cache-Antwort-Header MISS anstelle von HIT zurückgibt und so bestätigt, dass die Antwort nicht aus dem CDN-Cache bereitgestellt wird.

  7. Überprüfen Sie die Konfiguration der AEM-CORS-Richtlinie und stellen Sie sicher, dass com.adobe.granite.cors.impl.CORSPolicyImpl so konfiguriert ist, dass die erforderlichen Ursprünge für den Endpunkt zulässig sind.

  8. 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.

  9. Überprüfen Sie, ob Anfragen an den Endpunkt der persistierten Abfrage von GraphQL die erwarteten CORS-Header zurückgeben und erfolgreich verarbeitet wurden.

recommendation-more-help
experience-cloud-kcs-help-kbarticles