Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments
SOLVED

CORS issue | API call made from local server is failing even after configuring CORS policy in AEM 6.5

Avatar

Level 1

Hey folks,
I'm trying to make a fetch request to "http://localhost:4503/api/assets/we-retail-screens.json" via a react app running on "localhost:3000" . I have configured Adobe Granite Cross-Origin-Resource-Sharing Policy (attached screenshot). I'm expecting a json response. Instead, the fetch request is failing with response "Access to fetch at 'http://localhost:4503/api/assets/we-retail-screens.json' from origin 'http://localhost:3000' has been blocked by CORS policy" (please refer screenshot)Screenshot 2022-08-30 at 5.09.56 PM.pngScreenshot 2022-08-30 at 5.21.38 PM.png

1 Accepted Solution

Avatar

Correct answer by
Level 5

Hi @Gourav_on 

 

Can you add a logger and check the logs 

Logging is available under com.adobe.granite.cors:

  • enable DEBUG to see details about why a CORS request was denied
  • enable TRACE to see details about all requests going through the CORS handler.

Usually, this error occurs when a script on your website/web app attempts to make a request to a resource that isn't configured to accept requests coming from code that doesn't come from the same (sub)domain, thus violating the Same-Origin policy.

 

If the requested resource isn't configured to answer or to handle it correctly, then you'll see this error.

 

Please have a look at below doc. It explains on 2 approaches -

  1. Use a reverse proxy server to proxy requests to your resource and handle the OPTIONS method in the proxy.

  2. Add support for handling the OPTIONS method in the resource's code.

 

https://www.stackhawk.com/blog/fixing-no-access-control-allow-origin-header-present/

 

Thanks

View solution in original post

2 Replies

Avatar

Correct answer by
Level 5

Hi @Gourav_on 

 

Can you add a logger and check the logs 

Logging is available under com.adobe.granite.cors:

  • enable DEBUG to see details about why a CORS request was denied
  • enable TRACE to see details about all requests going through the CORS handler.

Usually, this error occurs when a script on your website/web app attempts to make a request to a resource that isn't configured to accept requests coming from code that doesn't come from the same (sub)domain, thus violating the Same-Origin policy.

 

If the requested resource isn't configured to answer or to handle it correctly, then you'll see this error.

 

Please have a look at below doc. It explains on 2 approaches -

  1. Use a reverse proxy server to proxy requests to your resource and handle the OPTIONS method in the proxy.

  2. Add support for handling the OPTIONS method in the resource's code.

 

https://www.stackhawk.com/blog/fixing-no-access-control-allow-origin-header-present/

 

Thanks

Avatar

Level 6

Hey @Gourav_on , By Seeing the Screenshot you are not allowing CORS, to do so put *. in the Allowed Origins<Regex> field.

This should solve your problem.

Read this Docs if possible https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/security/understand-cros... 

~Hope this Helps,

Aditya.Ch