403 Error when using the AEM Assets API in a Headless Project with a React Frontend, despite configuring CORS correctly?

Question

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/csrf-protection.html has solved the cors issue

Jagadeesh_Prakash · Accepted Answer

@mosa1 Below is a sample code which helps creating a folder in AEM using Asset API. Refer to below URL

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/using-assets-http-apis-in-postman-or-through-react-code/td-p/408782

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}`);
        });