CORS errors occur for GraphQL persisted queries in AEM as a Cloud Service

This article explains how to resolve issues with missing CORS headers on GraphQL persisted query responses in Adobe Experience Manager as a Cloud Service when CDN-level caching is involved.

Description description

Environment

  • Adobe Experience Manager as a Cloud Service
  • GraphQL persisted queries
  • CDN caching

Issue/Symptoms

  • Browser CORS errors occur when making cross-origin requests to GraphQL persisted query endpoints.
  • Responses from the CDN may lack required CORS headers, causing requests from different origins to fail.
  • Browsers block responses due to missing Access-Control-Allow-Origin headers, impacting headless or SPA integrations.

Cause

The CDN cache responses that do not include the required CORS headers, even if dispatcher-level caching is disabled for the endpoint. Unless explicitly instructed not to cache, the CDN can serve cached responses without the necessary headers.

Resolution resolution

Follow the steps below to resolve the issue:

  1. Review the Dispatcher configuration and verify that caching is not enabled for the GraphQL persisted query endpoint /graphql/execute.json/*. The configuration variable that controls this behavior is typically CACHE_GRAPHQL_PERSISTED_QUERIES. Ensure that the variable is undefined or configured to prevent caching for this path.

  2. Update the Dispatcher vhost configuration to use mod_headers and set the Cache-Control header to private, no-store, no-cache, must-revalidate, max-age=0 for the GraphQL persisted query endpoint.

    code language-none
    Header set Cache-Control "private, no-store, no-cache, must-revalidate, max-age=0"
    
  3. Apply the configuration changes and reload or restart the Dispatcher service.

  4. Test the GraphQL persisted query endpoint by sending a request that includes an Origin header.

  5. Verify that the response includes the expected Access-Control-Allow-Origin header.

  6. Verify that the x-cache response header returns MISS instead of HIT, confirming that the response is not being served from the CDN cache.

  7. Review the AEM CORS policy configuration and verify that com.adobe.granite.cors.impl.CORSPolicyImpl is configured to allow the required origins for the endpoint.

  8. If the CDN has already cached a response that does not include the required CORS header, purge or invalidate the cache for the affected endpoint to ensure that subsequent requests receive the correct headers.

  9. Verify that requests to the GraphQL persisted query endpoint return the expected CORS headers and are processed successfully.

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