Highlighted

CORS Policy blocking when accessing Adobe Rest APIs

prabakarm880930 01-11-2018

Hi,

I am trying to access Adobe target or AEM APIs through a sample ReactJS web app. But, when we run the app in Chrome browser or any browser, we are observing the following CORS error:

Access to XMLHttpRequest at '.../target/audiences' from origin 'http://localhost:9873' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried disabling security in Chrome browser, then the code is able to get response. But, this is not the correct fix.

Can someone please guide me to fix it in a right way?

Thanks for your help.

Replies

Highlighted
Shruthi_N
Employee
02-11-2018

Hi prabakarm88093071  The APIs exposed over adobe.io are intentionally built to not allow for CORS requests. The reason behind this is that it poses a security risk of exposing the API key and the access token that allows an attacker to tamper with Target data on the customer's behalf.

Hence the recommendation is to build a middle tier that talks to Adobe IO and React app communicates with that mid tier .

Highlighted
prabakarm880930 02-11-2018

Can you please guide how will this be developed (as a library or REST api?) and what will this middle tier do exactly? Forget about my use case etc. Tell me in general.

Highlighted
ryanr79035901
Employee
05-11-2018

Hi Prabakarn

Are you specifically referring to the delivery API (Target API v1.0 )? You're trying to use the API to enable Target to serve test content back to your web app?

Highlighted
prabakarm880930 05-11-2018

Hi Ryan,

Yes, I am trying to access Adobe target and AEM APIs. This is just a simple standalone proof of concept ReactJS web application developed to ensure AEM and Target APIs are able to access or not. I am just trying some GET and POST APIs. say for ex: https://mc.adobe.io/<..>/target/audiences

It is not only delivery APIs, any APIs we are trying to access, it is not allowing because of CORS error. We understand that adobe.io are intentionally built to not allow for CORS requests to avoid security risks. That's fine.

As per your team suggested, i would like to know how to develop and add this middle tier to accept CORS? Do you have any sample code/diagram/or any documentation/suggestions to implement the middle tier?