CORS Policy blocking when accessing Adobe Rest APIs

[prabakarm880930]

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.

[Shruthi_N]

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]

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.

[Shruthi_N]

Hi ryanr8​ Any thoughts on the above query?

[Rite18]

This is old thread but point to issue which still valid, i am also getting similar error. when i tried using Cloud Manager API via JS / Fetch cod 

has been blocked by CORS policy: Request header field access-control-allow-methods is not allowed by Access-Control-Allow-Headers in preflight response.

What is the next step here Please suggest

Do we  need to create to App Builder/ Firefly as middleware to access IO.api using JS code 

[Ryan_Roberts_]

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]

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?