Getting Error: Failed to fetch while i am trying to retrieve articles pages from React app

[Kishore1215]

Hi, just i am learning adobe AEM and while practicing getting below an error.

WKND Articles

Error: Failed to fetch

i have created AEM component and servlet class and now trying to fetch page articles which are in wknd content through React app getting above error. i searched and tried multiple ways to resolve the issue but i couldn't do. 

when i searched dev tools below erorr was showing even i have configured CORS in AEM OSGi console AEM -http://localhost:4502/system/console/configMgr for 

com.adobe.granite.cors.impl.CORSPolicyImpl

can some help on this what went wrong from my side.

(index):1 Access to fetch at 'http://localhost:4502/content/wknd/language-masters/en/PracticePage.article.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:4502/content/wknd/language-masters/en/PracticePage.article.json:1 Failed to load resource: net::ERR_FAILED
(index):1 Access to fetch at 'http://localhost:4502/content/wknd/language-masters/en/PracticePage.article.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:4502/content/wknd/language-masters/en/PracticePage.article.json:1 Failed to load resource: net::ERR_FAILED

[muskaanchandwani · Accepted solution]

Hello @Kishore1215 

>> Please validate your CORS Configuration :
com.adobe.granite.cors.impl.CORSPolicyImpl:

Allowed Origins: http://localhost:3000
Allowed Paths: /content/wknd (or /)
Allowed Methods: GET, POST, OPTIONS
Allowed Headers: *
Supports Credentials: true

>> Make sure your servlet matches the CORS policy path.
If using a custom servlet, ensure it sends correct CORS headers and handles OPTIONS requests.

>> In Browser Console, inspect the API response headers for Access-Control-Allow-Origin - If missing, the CORS configuration is still incorrect or not applied

>> Your config must allow the OPTIONS method if your React app sends it before GET/POST.

[Kishore1215]

Hi, Thanks for the reply.
I have added below points in http://localhost:4502/system/console/configMgr .  still getting same error. 

Allowed Origins: http://localhost:3000
Allowed Paths: /content/wknd (or /)
Allowed Methods: GET, POST, OPTIONS
Allowed Headers: *
Supports Credentials: true

[giuseppebaglio]

hi @Kishore1215, 

I occasionally find these plugins very helpful:

https://chromewebstore.google.com/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino 

https://chromewebstore.google.com/detail/cross-domain-cors/mjhpgnbimicffchbodmgfnemoghjakai 

[Kishore1215]

Thaks it works now.  after adding CORS plug in to edge browser.