Amazon web services – 'http://localhost:3000' has been blocked by CORS

I’ve been trying to connect my react .js file to the back end. I have a API in API Gateway and I created a method and enabled CORS and gave it access

method.response.header.Access-Control-Allow-Headers 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
method.response.header.Access-Control-Allow-Methods 'OPTIONS'
method.response.header.Access-Control-Allow-Origin  '*'

I even tried the http://localhost:3000 for the Access-Control-Allow-Origin

but every-time I run this code and check the console I’m getting the error

Access to fetch at https://mdksmdk.execute-api.us-east-5.amazonaws.com/blehxajkhnd from origin http://localhost:3000 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I’ve enabled the CORS multiple times. Idk what could be the issue

I don’t think i can paste the code publicly but I am experiencing a persistent CORS issue when attempting to connect to my AWS Lambda function via API Gateway from my client-side application running on http://localhost:3000 . Despite configuring both the API Gateway and the Lambda function to include appropriate CORS headers, the browser console continues to report CORS errors, preventing successful interactions with the API.

Access to fetch at ‘https://.execute-api.us-east-2.amazonaws.com/newstage/NEW’ from origin ‘http://localhost:3000 ‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Configuration Details:

Lambda Function: I have ensured my Lambda function includes CORS headers in its response as follows:

return {
    statusCode: 200,
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Content-Type",
        "Access-Control-Allow-Methods": "OPTIONS, POST"
    },
    body: JSON.stringify({ data })
};

API Gateway:
CORS Settings: I have enabled CORS on my API Gateway and configured it to respond with the necessary headers. The OPTIONS method has been set up with a mock integration to return:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, X-Amz-Date, Authorization, X-Api-Key, X-Amz-Security-Token

Deployment: I have redeployed the API after every change to ensure updates are propagated.

Troubleshooting Done:

• I have cleared the browser cache and tested the API in an incognito window to avoid using cached data.
• I have also tested the API endpoint using Postman and curl, and it seems to work correctly, which suggests the issue might be related to how the API Gateway handles CORS headers specifically when requests are made from a browser.

Request:

I would appreciate guidance on why the ‘Access-Control-Allow-Origin’ header might not be present in the response when accessed from the browser despite being configured in both the API Gateway and Lambda function. Any additional configuration steps or adjustments that I might have overlooked would also be helpful.
API ID / Invoke URL: https://vj4hbd1usf.execute-api.us-east-2.amazonaws.com/newstage
Region: us-east-2
Please select the type of API Gateway: REST API