CORS error when making POST request to API Gateway-CodePudding

I am making a POST request to an endpoint I have on the API Gateway, when I make the request, I get these errors:

Access to fetch at 'API_URI' 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.

POST API_URI net::ERR_FAILED 200
    POSTRequest @ Home.js:17
    getFileData @ Home.js:71
    callCallback @ react-dom.development.js:3945
    invokeGuardedCallbackDev @ react-dom.development.js:3994
    invokeGuardedCallback @ react-dom.development.js:4056
    invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
    executeDispatch @ react-dom.development.js:8243
    processDispatchQueueItemsInOrder @ react-dom.development.js:8275
    processDispatchQueue @ react-dom.development.js:8288
    dispatchEventsForPlugins @ react-dom.development.js:8299
    (anonymous) @ react-dom.development.js:8508
    batchedEventUpdates$1 @ react-dom.development.js:22396
    batchedEventUpdates @ react-dom.development.js:3745
    dispatchEventForPluginEventSystem @ react-dom.development.js:8507
    attemptToDispatchEvent @ react-dom.development.js:6005
    dispatchEvent @ react-dom.development.js:5924
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    discreteUpdates$1 @ react-dom.development.js:22413
    discreteUpdates @ react-dom.development.js:3756
    dispatchDiscreteEvent @ react-dom.development.js:5889
    Home.js:26 TypeError

TypeError: Failed to fetch
    at POSTRequest (Home.js:17:1)
    at getFileData (Home.js:71:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
    at executeDispatch (react-dom.development.js:8243:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
    at processDispatchQueue (react-dom.development.js:8288:1)
    at dispatchEventsForPlugins (react-dom.development.js:8299:1)

The strange thing is, I go into cloud watch and I can see the data sent by the API in the log with no errors? I also have CORS enabled with the 4xx and 5xx errors and have staged the API after doing this multiple times to ensure it isn't that.

Here is my code for sending the POST request:

const POSTRequest = (JSONBody) => {
        fetch('API_URI', {
            method: 'POST',
            body : JSON.stringify(JSONBody),
            headers: {'Content-Type': 'application/json'}
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }

Here is my lambda function code connected to the endpoint of my API, it just returns whatever data was sent to it:

import json

def lambda_handler(event, context):
    data = json.loads(event['body'])
    print(data)
    print(event['body'])
    
    
    return {
        "statusCode": 200,
        "body": json.dumps(data),
        "headers": {
            'Content-Type': 'application/JSON',
        },
    }

CodePudding user response：

You need to set the CORS headers on the lambda function

See reference here: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html