CORS error with API Gateway and Lambda **only** when using Proxy Integration

Question

I am trying to add an Item to DynamoDB upon a post request from API Gateway using Lambda.

This is what my Lambda code looks like:

var AWS = require('aws-sdk');
var dynamoDB = new AWS.DynamoDB();

exports.handler = (event, context, callback) => {
var temp_id = "1";
var temp_ts = Date.now().toString();
var temp_calc = event['params']['calc'];

var params = {
    TableName:"calc-store",
    Item: {
        Id: {
            S: temp_id
        },
        timestamp: {
            S: temp_ts
        },
        calc: {
            S: temp_calc
        }
    }
};
dynamoDB.putItem(params,callback);


const response = {
    statusCode: 200,
    headers: {
        'content-type': 'application/json',
        'Access-Control-Allow-Origin': '*' 
    },
    body: event['params']['calc']
};

callback(null, response); 
};

This is how I am calling the function from my client

axios.post(apiURL, {params:{calc:calc}})
.then ((res) => {
  console.log(res);
})

I have enabled CORS over 30 times on my API Gateway, and I've also double checked by adding headers to the response. But no matter what I do, I keep getting a CORS error and for some reason, in my response, I can see that the "Access-Control-Allow-Origin" header is not being appended.

POST https://egezysuta5.execute-api.us-east-1.amazonaws.com/TEST 502
localhost/:1 Failed to load https://egezysuta5.execute-api.us-east- 
1.amazonaws.com/TEST: No 'Access-Control-Allow-Origin' header is 
present on the requested resource. Origin 'http://localhost:3000' is 
therefore not 
allowed access. The response had HTTP status code 502.
createError.js:17 Uncaught (in promise) Error: Network Error
at createError (createError.js:17)
at XMLHttpRequest.handleError (xhr.js:87)

I tried not using Lambda Proxy Integration, and it worked then, however, I was unable to access the params I passed.

EDIT: After spending hours on this, here is what I've boiled the problem down to. My client is making a successful pre-flight request to OPTIONS. The OPTIONS is successfully returning the correct CORS headers, but for some reason, these are not being passed to my POST request!

EDIT2: (This does not solve the problem) If I change the response body to a string there is no error!! There is something wrong with

event['params]['calc']

Answer 1

Your problem is with the flow of the code. Basically you're not waiting for putItem to complete before callback gets executed...Try this...

dynamoDB.putItem(params,(err,data) => {
if(err){

  return callback(err, null)

}

const response = {
    statusCode: 200,
    headers: {
        'content-type': 'application/json',
        'Access-Control-Allow-Origin': '*' 
    },

    body: JSON.parse(event.body).calc
};

return callback(null, response); 

});

Answer 2

There are 2 issues going on here:

1. your code is crashing because you are probably trying to access a null property in the event object
2. because your code fails before you can return the full response, the proper cors headers don’t get sent back to the browser.

Always try and catch errors in your lambda code. Always log the error and return the full response with a status code of 500, in the case of an error. Also, it’s important to handle async functions, like putItem with promises. Really grasp that concept before working with JavaScript!