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

[mvotos]

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

[Imran__Khan]

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.

[Jagadeesh_Prakash · Accepted solution]

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

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

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