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

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 4

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