Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

CORS Error When Accessing AEM Assets API from React Application

Avatar

Level 2

I'm developing a React application that interacts with Adobe Experience Manager (AEM) Assets API to create folders dynamically within the AEM DAM. However, I'm encountering a Cross-Origin Resource Sharing (CORS) error when trying to send a POST request to the AEM Assets API.

 

Here's the function I'm using to create a folder:

 


const createFolder = async () => {
const folderName = generateFolderName(testName);
const url = `${AEM_BASE_URL}/api/assets/my-project/test/`;
const auth = `Basic ${window.btoa(`${AEM_USERNAME}:${AEM_PASSWORD}`)}`;

const response = await fetch(url, {
method: 'POST',
headers: {
'Authorization': auth,
'Content-Type': 'application/json'
},
body: JSON.stringify({
class: "sling:Folder",
properties: {
"jcr:title": folderName
}
})
});

if (!response.ok) {
throw new Error(`Failed to create folder: ${response.statusText}`);
}

const data = await response.json();
console.log('Folder created:', data);
return `/content/dam/my-project/test/${folderName}`;
};

 

The AEM_BASE_URL is configured as http://localhost:4502, and the function is intended to create a new folder under /content/dam/my-project/test/ path.

However, when executing this function, I receive the following CORS error:

Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy 

 

This issue occurs even though my AEM instance is running locally, and I'm trying to access it from my local React development server.

  1. How can I resolve this CORS issue to allow my React application to make requests to the AEM Assets API successfully?
  2. Are there best practices or recommended approaches when working with AEM Headless and React to avoid such CORS issues?

 

Thanks. Once creating folders, I also aim to place images and content fragments there too.

I am aware this isn't the best practice with how I currently have it set up, but in more of a testing stage.

 

6 Replies

Avatar

Community Advisor

@mvotos For local testing purpose , you can follow the configuration steps mentioned in this document. 

 

Go to AEM configMgr

  • http://<host>:<port>/system/console/configMgr > Adobe Granite Cross Origin Resource Sharing Policy
  • Add http://localhost:3000 in allowed origins
  • Also update the allowed method (POST) and allowed paths if needed.

 

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

 

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

 

Avatar

Level 2

Thanks for the reply & links.

mvotos_0-1707498766638.png

 

After saving, I'm still recieving a CORS error. 

mvotos_1-1707472829543.png

 

 

Avatar

Community Advisor

Hi @mvotos ,

 

Following what @Saravanan_Dharmaraj should work, what I see you are missing is to include the OPTIONS method in your "Allowed Methods", this is needed because the React app will perform a pre-flight before the POST call.

Hope this helps



Esteban Bustamante

Avatar

Level 2

Hi @EstebanBustamante 

 

Thanks for your reply and info.

I have added OPTIONS in the allowed methods.

mvotos_0-1707733105160.png

 

I am still getting the CORS error after adding OPTIONS 

Update: I no longer get the CORS error after adding in a few more things such as Authorization in supported headers, however I am getting a 403. 

mvotos_0-1707765391634.png

 

mvotos_1-1707765433247.png

 

 

 

 

Avatar

Community Advisor

I think you are missing the "authorization" header in your config. 

Please compare with mine config below, which is working fine with a React app

EstebanBustamante_0-1707921691958.png

 



Esteban Bustamante

Avatar

Administrator

@mvotos Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni