Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Cors error react - graphql

Avatar

Level 2

I am unable to consume response from AEM to React application.

React App - AEM Headless Example | Adobe Experience Manager

Access to fetch at 'http://localhost:4504/content/graphql/global/endpoint.json' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

1 Accepted Solution

Avatar

Correct answer by
Level 2

I am able to consume response with help of below configuration

 

Adobe Granite CSRF filter - Excluded path 

Add cutom graphql endpoint - for example - /content/_cq_graphql/myproject/endpoint.json

 

 

View solution in original post

3 Replies

Avatar

Employee Advisor

Hi @sathyaprakash 

Please check below link to configure your CORS policy and Sling Refferer Filter on AEM to enable GraphQL Endpoints accessible to external application

https://www.albinsblog.com/2021/10/how-to-deliver-headless-content-through-graphql-api-and-content-f...

 

Avatar

Correct answer by
Level 2

I am able to consume response with help of below configuration

 

Adobe Granite CSRF filter - Excluded path 

Add cutom graphql endpoint - for example - /content/_cq_graphql/myproject/endpoint.json

 

 

Avatar

Employee Advisor

@sathyaprakash @kautuk_sahni 
Can you please mark the correct answer, so people would know the result of this query.