Have been struggling with CORS issues for a week or more. I believe everything is configured correctly but yet still I cannot make it work.

Am making an API call from a web page (hosted via AWS Amplify) to an AWS LAMBDA function:

<script>
        // callAPI function that takes the base and exponent numbers as parameters
        var callAPI = (name,notes)=>{
         
            // using built in JSON utility package turn object to string and store in a variable
            var raw = JSON.stringify({"name":name,"notes":notes});
            // create a JSON object with parameters for API call and store in a variable
            var requestOptions = {
                method: 'POST',
                mode: 'cors',
                headers: {'Content-Type': 'application/json'},
                body: raw,
                redirect: 'follow'
            };
            // make API call with parameters and use promises to get response
            fetch("https://xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com/staging/createProjectApi", requestOptions)
            .then(response => response.text())
            .then(result => alert(JSON.parse(result)))
            .catch(error => console.log('error', error)); 
        }
    </script>

My request header looks like this:

Accept  */*
Accept-Encoding gzip, deflate, br
Accept-Language en-GB,en;q=0.5
Access-Control-Request-Headers  content-type
Access-Control-Request-Method   POST
Connection  keep-alive
Host    xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com
Origin  https://staging.xxxxxxx.amplifyapp.com
Referer https://staging.xxxxxxx.amplifyapp.com/
Sec-Fetch-Dest  empty
Sec-Fetch-Mode  cors
Sec-Fetch-Site  cross-site
TE trailers
User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0

Note I am supplying headers in my POST request.

In my Lambda function:

   # return a properly formatted JSON object
    return {
    'statusCode': 200,
    'headers': {
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
        }
    'body': json.dumps('Thanks for the submission')

API GATEWAY

In AWS API Gateway/CORS configuration:

Access-Control-Allow-Origin - '*'
Access-Control-Allow-Methods - 'content-type'
Access-Control-Allow-Methods - GET, POST, OPTIONS
Access-Control-Expose-Headers - No Expose Headers are allowed
Access-Control-Max-Age - 0 Seconds
Access-Control-Allow-Credentials - NO

As far as I can see everything is set properly to allow me to make a call to the API gateway from another domain but yet I still get:

CORS Preflight Did Not Succeed

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://hqt3x1kjla.execute-api.ap-southeast-2.amazonaws.com/staging/createProjectApi. (Reason: CORS preflight response did not succeed). Status code: 500.

Can anyone help me work out how to fault find this?

Have tried multiple attempts to configure including deleting the API gateway and building a new one.