CORS issue whn sending request from React | Community
Skip to main content
aliaksandr_hvoz
September 9, 2023
Solved

CORS issue whn sending request from React

  • September 9, 2023
  • 3 replies
  • 1239 views

Hi.

I'm trying to send a request to AEM from React. But I get either a CORS error or an empty response with status 200, but from the browser the response has a body.

Tell me how to set it up if:

AEM localhost:4502

React localhost:3000

 

Config

React fetch

Thank you very much in advance)

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aanchal-sikka

Hello @aliaksandr_hvoz 

 

There is a detailed adobe documentation on how to deal with CORS errors. Please refer to https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/security/understand-cross-origin-resource-sharing.html?lang=en

 

One would have to update :

  •  Publish -> "Adobe Granite Cross Origin Resource Sharing Policy" OSGi config to declared allowed origins, methods etc
  • Dispatcher:
    • Allowing CORS request headers
    • Caching CORS resposne headers

 

Even steps for debugging are available on the link

 

3 replies

Mahedi_Sabuj
Community Advisor
Community Advisor
September 9, 2023

You may consider adding "Authorization" in the Supported Headers. Please refer to the Site 2 example, which requires authentication. https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/security/understand-cross-origin-resource-sharing.html?lang=en#example-configurations 

"supportedheaders":[ "Origin", "Accept", "X-Requested-With", "Content-Type", "Access-Control-Request-Method", "Access-Control-Request-Headers", "Authorization", // New "CSRF-Token" // New ]

 

Mahedi Sabuj
aanchal-sikka
Community Advisor
aanchal-sikkaCommunity AdvisorAccepted solution
Community Advisor
September 9, 2023

Hello @aliaksandr_hvoz 

 

There is a detailed adobe documentation on how to deal with CORS errors. Please refer to https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/security/understand-cross-origin-resource-sharing.html?lang=en

 

One would have to update :

  •  Publish -> "Adobe Granite Cross Origin Resource Sharing Policy" OSGi config to declared allowed origins, methods etc
  • Dispatcher:
    • Allowing CORS request headers
    • Caching CORS resposne headers

 

Even steps for debugging are available on the link

 

Aanchal Sikka
kautuk_sahni
Community Manager
Community Manager
September 11, 2023

@aliaksandr_hvoz Do you find the suggestions from users useful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. 

Kautuk Sahni