How to Fetch GraphQL Response in EDS Using XWalk ? – CORS Issue

[VijayRa10]

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

[narendiran_ravi]

Hi @VijayRa10 ,

Did you add the configuration in AEM for CORS ? Refer -https://experienceleague.adobe.com/en/docs/experience-manager-learn/foundation/security/understand-cross-origin-resource-sharing

[VijayRa10]

Hi @narendiran_ravi 

Thanks for sharing the reference!

Actually, I'm looking for a solution that can be handled directly within EDS itself, without configuring CORS in AEM.

Let me know if you've come across any EDS-native approaches for this.

[CAnthony · Accepted solution]

Hi @VijayRa10. CORs can be the bane of one's existence!  Since you are using GraphQL to query data inside Assets from AEM and deliver that to a separate service, EDS you have to think of them as completely separate entities.  EDS/XWalk is just receiving data from AEM Assets.  When you are inside the UE for XWalk it is the same instance talking to each other so no CORs.  However once you operate the query inside the EDS url, the GraphQL query is expecting an origin the same as the AEM instance when instead it is getting "main-myproject-myowner.live" instead.  So there is no way (that I am aware of our have executed) to configure GraphQL CORs within EDS itself - it's all AEM.

It took me awhile but getting rid of CORS for me for both GraphQL and even AEM servlet queries involves the dispatcher and the CORSPolicyImpl json with the filters.any and enabled_vhosts files.  I have been successful in killing CORs for 2 sites with this. This was helpful to get started
https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...