Unable access model.json through react app | Community
Skip to main content
Level 2
November 25, 2022
Solved

Unable access model.json through react app

  • November 25, 2022
  • 2 replies
  • 781 views

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

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 Avinash_Gupta_

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.

 

 

 

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-cross-origin-resource-sharing.html 

 

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/headless/deployment/cross-origin-resource-sharing.html?lang=en 

 

Hope this helps.

2 replies

SantoshSai
Community Advisor
Community Advisor
November 25, 2022

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.

Regards,
Santosh

Santosh Sai
Avinash_Gupta_
Community Advisor and Adobe Champion
Avinash_Gupta_Community Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
November 26, 2022

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.

 

 

 

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-cross-origin-resource-sharing.html 

 

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/headless/deployment/cross-origin-resource-sharing.html?lang=en 

 

Hope this helps.