Cors error react - graphql

Question

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.

sathyaprakash · Accepted Answer

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

krati_garg · Answer

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-fragments-in-aem.html#.Y43LD3ZBw2z:~:text=Consume%20GraphQL%20API%20Data%20from%20External%20System%3A

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded