Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

CORS Policy blocking when accessing Adobe Rest APIs

prabakarm880930
Level 2
Level 2

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.

5 Replies
Shruthi_N
Employee
Employee

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 .

prabakarm880930
Level 2
Level 2

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.

ryanr701
Employee
Employee

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?

prabakarm880930
Level 2
Level 2

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?