CORS Error When Accessing AEM Assets API from React Application

[mvotos]

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.

[Saravanan_Dharmaraj]

@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... 

[mvotos]

Thanks for the reply & links.

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

[EstebanBustamante]

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

[mvotos]

Hi @EstebanBustamante 

Thanks for your reply and info.

I have added OPTIONS in the allowed methods.

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. 

[EstebanBustamante]

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

[kautuk_sahni]

@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.