Getting Error: Failed to fetch while i am trying to retrieve articles pages from React app | Community
Skip to main content
K
Kishore1215
November 4, 2025
Solved

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

  • November 4, 2025
  • 2 replies
  • 288 views

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
 

 

Best answer by muskaanchandwani

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.

2 replies

muskaanchandwani
Adobe Employee
muskaanchandwaniAdobe EmployeeAccepted solution
Adobe Employee
November 4, 2025

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.

K
Kishore1215Author
November 6, 2025

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
giuseppebaglio
Level 10
November 5, 2025

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 

K
Kishore1215Author
November 7, 2025

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

Terms & ConditionsAccessibility statement

Loading footer...