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-Originheaders, 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:
-
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 typicallyCACHE_GRAPHQL_PERSISTED_QUERIES. Ensure that the variable is undefined or configured to prevent caching for this path. -
Update the Dispatcher vhost configuration to use
mod_headersand set theCache-Controlheader toprivate, no-store, no-cache, must-revalidate, max-age=0for the GraphQL persisted query endpoint.code language-none Header set Cache-Control "private, no-store, no-cache, must-revalidate, max-age=0" -
Apply the configuration changes and reload or restart the Dispatcher service.
-
Test the GraphQL persisted query endpoint by sending a request that includes an
Originheader. -
Verify that the response includes the expected
Access-Control-Allow-Originheader. -
Verify that the
x-cacheresponse header returnsMISSinstead ofHIT, confirming that the response is not being served from the CDN cache. -
Review the AEM CORS policy configuration and verify that
com.adobe.granite.cors.impl.CORSPolicyImplis configured to allow the required origins for the endpoint. -
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.
-
Verify that requests to the GraphQL persisted query endpoint return the expected CORS headers and are processed successfully.