I'm working on a headless Adobe Experience Manager (AEM) project where I use React for the frontend. After initially facing CORS issues during local testing, I followed advice to configure AEM's CORS policy, allowing http://localhost:3000 and updating allowed methods to include OPTIONS for pre-flight checks as well as POST, as my React app needs to perform POST requests to the AEM Assets API.
After these adjustments, I'm now encountering a 403 error when attempting to create a new folder in the AEM repository using the Assets API.
Update 1: From what I see in the logs, need a CSRF token.
com.adobe.granite.csrf.impl.CSRFFilter isValidRequest: empty CSRF token - rejecting
com.adobe.granite.csrf.impl.CSRFFilter doFilter: the provided CSRF token is invalid
Update 2: https://experienceleague.adobe.com/docs/experience-manager-learn/cloud-service/developing/advanced/c... has solved the cors issue
Solved! Go to Solution.
Views
Replies
Total Likes
@mvotos Below is a sample code which helps creating a folder in AEM using Asset API. Refer to below URL
const ASSETS_HTTP_API = '/api/assets';
const NEW_FOLDER_TO_CREATE = '/myFolder';
await fetch(`${params.aem}${ASSETS_HTTP_API}${NEW_FOLDER_TO_CREATE}`, {
method: 'post',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + params.accessToken // Provide the AEM access token in the Authorization header
},
body: JSON.stringify({
class: 'assetFolder',
properties: {
"title": "New Folder"
}
})
})
.then(res => {
console.log(`${res.status} - ${res.statusText}`);
});
Follow below links to resolve this issue.. we have to allow this URL
/api/assets/my-project/tests/
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/403-forbidden-error-while-...
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/post-servlet-giving-403-fo...
Though, this is not a good practice to send username and password over network for login due to security constraint.
@mvotos Below is a sample code which helps creating a folder in AEM using Asset API. Refer to below URL
const ASSETS_HTTP_API = '/api/assets';
const NEW_FOLDER_TO_CREATE = '/myFolder';
await fetch(`${params.aem}${ASSETS_HTTP_API}${NEW_FOLDER_TO_CREATE}`, {
method: 'post',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + params.accessToken // Provide the AEM access token in the Authorization header
},
body: JSON.stringify({
class: 'assetFolder',
properties: {
"title": "New Folder"
}
})
})
.then(res => {
console.log(`${res.status} - ${res.statusText}`);
});
@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