Exporting AEM Page in JSON

[Johnhenao10]

I have the following URL of an AEM page that I want to export as JSON, and I am able to retrieve the JSON correctly: http://localhost:4502/content/web-example/es/home/page-exporter.model.json

However, how can I make it accessible for consumption by a third party, such as a React or Vue application? Is there any documentation available for consuming this API and the authentication method? Specifically, when I try to directly access it in a Vue project using axios, I encounter a CORS issue.

Any recommendations would be greatly appreciated.

[SureshDhulipudi · Accepted solution]

Please go through WKND tutorial for SPA (vue or react etc)

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/o...

https://www.mavice.com/blog/integrate-a-spa/

For CORS issue - please check below

CORS: AEM by default doesn't allow cross-origin requests due to security reasons. You need to configure AEM's Apache Sling Referrer Filter and Adobe Granite CSRF Filter to allow requests from your Vue or React application's domain.

You can do this by going to the OSGi configuration console (http://localhost:4502/system/console/configMgr) and updating the "Allowed Hosts" and "Allowed Origins" fields in the respective filters.

https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/security/develop-for-cro...

[Shashi_Mulugu]

@Johnhenao10 AEM has capability to integrate with most of front-end applications/Frameworks.. please explore options of Remote Spa..

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

[Imran__Khan]

@Johnhenao10 To implement SPA please check below link where we can export data in the form of JSON and consume same within component.

https://medium.com/@toimrank/aem-react-spa-fb10256dbdce

There are multiple ways to resolve COR issues:

CORS configurations are managed as OSGi configuration factories in AEM and allow your domain as part of below OSGI configuration

Recommended way (references):

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

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/d...

CORS allow Using Headers

https://www.albinsblog.com/2018/08/how-to-enable-cross-origin-resource-sharing-support-in-aem.html#g...