How to Fetch GraphQL Response in EDS Using XWalk ? – CORS Issue
Hi Everyone,
I'm currently working on an Edge Delivery Services (EDS) project using XWalk and trying to fetch data from an AEM GraphQL endpoint. Here’s the simplified JavaScript logic I’m using:
const isAuthor = window.location.hostname.includes('adobeaemcloud');
const domain = isAuthor ? '' : 'publish-p1234-e454334.adobeaemcloud.com';
const endpoint = '/graphql/execute.json/eds-dummy/faqs';
const url = domain ? https://${domain}${endpoint} : endpoint;
const response = await fetch(url);
const data = await response.json();
I also followed the steps outlined in the Publishing pages with AEM Assets article and applied the following changes:
- Updated paths.json:
{
"mappings": [
"/content/eds-dummy/:/"
],
"includes": [
"/content/eds-dummy/",
"/content/dam/eds-dummy/"
]
}- Set Cloud Configuration for the DAM folder (/content/dam/eds-dummy/):
- Went to Assets → /content/dam/eds-dummy/
- Opened Properties → Cloud Services
- Set the Cloud Configuration to /conf/eds-dummy and saved.
After applying these configurations, I'm now encountering a CORS error when trying to fetch the GraphQL response.
Access to fetch at 'https://publish-p1234-e454334.adobeaemcloud.com/graphql/execute.json/eds-dummy/faqs'
from origin 'https://main--eds-dummy--iamhelium.aem.live' has been blocked by CORS policy:
The 'Access-Control-Allow-Origin' header contains multiple values
'https://main--eds-dummy--iamhelium.aem.live,*', but only one is allowed.
This results in a failed request:
GET https://publish-p1234-e454334.adobeaemcloud.com/graphql/execute.json/eds-dummy/faqs net::ERR_FAILED 200 (OK)
This issue didn't occur previously, so I suspect it might be related to the recent update I made to the Cloud Configuration of the DAM folder—especially since the content fragment referenced in the GraphQL query is also located within that same folder.
My questions:
- Is this the correct approach for fetching GraphQL data in an EDS project using XWalk?
- Does this CORS error suggest a misconfiguration on the AEM side (e.g., misused Access-Control-Allow-Origin)?
- Are there any additional configurations needed—either in paths.json, AEM, or elsewhere—to allow GraphQL access from EDS?
Any insights, suggestions, or best practices would be greatly appreciated!
Thanks in advance!
Vijay