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.
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.
Views
Replies
Total Likes
@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.
Thanks for the reply & links.
After saving, I'm still recieving a CORS error.
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
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.
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
@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.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies