CORS Error When Accessing AEM Assets API from React Application

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.