Expand my Community achievements bar.

SOLVED

Unable access model.json through react app

Avatar

Level 2

I am able to get the data in postman when try to access model.json through react app I am getting an cors error and network error. Does anyone faced this before and have solution kindly share it

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @rengan76 Hitting any API through Postman won't give you any CORS error. Since there is a difference between the domain of your React App and model.json used in  AEM,  triggers into a CORS error. You would have to set Cross-Origin Resource Sharing (CORS) configuration in AEM

 

The CORS configuration must specify a trusted website origin alloworigin or alloworiginregexp for which access must be granted.

 

AvinashGupta01_0-1669436707736.png

 

 

Kindly refer to the below links that will help you to understand the CORS error and how to resolve it :-

 

https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/security/understand-cros... 

 

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/headless/deployment... 

 

Hope this helps.

View solution in original post

2 Replies

Avatar

Community Advisor

Hi @rengan76 ,

Could you please elaborate some more details about your issue? How are you accessing it through postman and what url? 
Also, appreciate if you post error stack here.

There might be problem with your Rest Client as it is making a POST request on the author instance, http://localhost:4502. You will get an authentication error.

You can solve this issue by including basic auth type in Postman.

Launch Postman, then navigate to the Authentication tab. Ensure type is set to “Basic Auth”, and username and password are set to “admin”; this is the default username and password for the administrator user while developing on the author instance.

post-man-basic-auth-1024x767.png

Regards,
Santosh

Avatar

Correct answer by
Community Advisor

Hi @rengan76 Hitting any API through Postman won't give you any CORS error. Since there is a difference between the domain of your React App and model.json used in  AEM,  triggers into a CORS error. You would have to set Cross-Origin Resource Sharing (CORS) configuration in AEM

 

The CORS configuration must specify a trusted website origin alloworigin or alloworiginregexp for which access must be granted.

 

AvinashGupta01_0-1669436707736.png

 

 

Kindly refer to the below links that will help you to understand the CORS error and how to resolve it :-

 

https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/security/understand-cros... 

 

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/headless/deployment... 

 

Hope this helps.