Highlighted

Calling third party REST api call form clinet side on AEM (e.g. localhost:4052 )

chgovind

02-11-2018

Let's say we are calling an a third party API directly from React using axios/fetch. (localhost:9000)

To handle CORS issues we set proxy in  packege.json/webpack.config, and "passing relative URL" to axios/fetch(THIS WORKS!!)

NOW we deployed the same in AEM and hosting on localhost:4502.(THIS DOESN'T WORK)

I understand that now react build is deployed and proxy will not work in production, but I am looking for a way to handle it once it's deployed and served on AEM.

Replies

Highlighted

dgordon86

Employee

02-11-2018

Hi @chgovind ,

To make sure I am understanding the use case:

During development, you are using a webpack dev server and any calls to your external service you are using the Proxy features of the webpack dev server and thus passing in a relative URL. However, when you create your production build and deploy to AEM the JS is still passing in relative URLs to your 3rd party API?

You could look into using environment variables: Adding Custom Environment Variables · Create React App If you are in development mode you don't add a host name but in the production build you do append a host name to the 3rd party call...

Highlighted

chgovind

06-11-2018

You are close.

What if the third party API doesn't allow CORS.

Is there a way to handle this in Local AEM environment?

Highlighted

smacdonald2008

06-11-2018

A better apprach to invoke a 3rd party endpoint - like a Restful service is to use an AEM service and write Java to invoke the service and then display the results in front end component. YOu should look at using HTL and Sling Models.

Highlighted

smacdonald2008

06-11-2018

Even in this write up - they suggest React alone - there is no way:

"React doesn't really have anything for consuming data"

Another way - is have React make a call to an AEM Sling Servlet - the servlet invokes a Java service (similar to the article i posted), gets the data and returns the data back to the React component --

Is it possible to consume a RESTful API with React.js alone (i.e. without any server-side language, ...