502 error response from API Gateway in react but works on postman

Question

When I send a request to my API on API Gateway either through the testing bit, or through POSTMAN, the request is sent and received okay, and I can the expected response body, however, when I make the API request through the code below, I get a 502 error.

There are no issues with the CORS policies as I am not getting any of those errors, here is my request code and the subsequent errors.

POST REQUEST CODE

fetch('https://4diopo9a77.execute-api.eu-west-2.amazonaws.com/DSA_API/imagedata', {
    method: 'POST',
    body :"{'A':'A'}"
}).then(function(data) {
    console.log(data)
})

CONSOLE OUTPUT

POST `API_NAME` 502
Response {type: 'cors', url: '*API_NAME*', redirected: false, status: 502, ok: false, …}

ERROR 1 STACK TRACE

POSTRequest @   Home.js:15
getFileData @   Home.js:49
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

ERROR 2 DETAILS

body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 502
statusText: ""
type: "cors"
url: "*API_NAME*"
[[Prototype]]: Response

Here is an image of the POSTMAN request info

Answer 1

Cors headings needed to be added to the response, the browser was blocking the response as it wasn't returning the heading, added this and it worked:

"Access-Control-Allow-Origin": '*'

So my return in the lambda looked like this:

return {
        "statusCode": 200,
        "body": json.dumps(data),
        "headers": {
            'Content-Type': 'application/JSON',
            "Access-Control-Allow-Origin": '*'
        },
    }