CORS issue whn sending request from React

[aliaksandr_hvoz]

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)

[Mahedi_Sabuj]

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-cros... 

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

[aanchal-sikka · Accepted solution]

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-cros...

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

[kautuk_sahni]

@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.