I have a React application that makes POST requests to my AWS Lambda function through API Gateway. The setup should be straightforward but I keep getting a 502 Bad Gateway error.
My Lambda function processes data arrays and calls an external AI service. When I test it directly in the AWS console it works perfectly fine. But when my frontend tries to call it I get this error.
The CloudWatch logs show something about a missing log group which is confusing because the function itself runs fine during testing.
Here’s my frontend code that makes the request:
const apiData = [
{ name: "username", dataType: "text" },
{ name: "userAge", dataType: "number" }
];
const response = await fetch('https://myapi.execute-api.region.amazonaws.com/stage/process-data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ apiData })
});
I’ve set up CORS headers in my Lambda response like this:
const responseHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type',
'Content-Type': 'application/json'
};
The Lambda function uses an external API call with node-fetch and I deployed it as a zip file with the package.json included. What could be causing this 502 error when everything works fine in the console?