CORS issue with Serverless and PUT command

Question

I am running into another CORS issue with Serverless and AWS. Seems I need to tell it specifically to allow a PUT method, but I am not sure where this code goes. I have the following code for my Lambda function:

module.exports.update = (event, context, callback) => {
  const timestamp = new Date().getTime();
  const data = JSON.parse(event.body);
  if (typeof event.pathParameters.timeoffgroupid !== 'string') {
    console.error('Validation Failed');
    callback(new Error('Couldn\'t update the todo item.'));
    return;
  }
  const params = {
    TableName: 'TimeOffGroup',
    Key: {
      timeoffgroupid: event.pathParameters.timeoffgroupid,
    },
    ExpressionAttributeValues: {
      ':timeOffGroup': data.timeOffGroup,
      ':timeOffGroupColor': data.timeOffGroupColor,
      ':dateModified': timestamp
    },
    UpdateExpression: 'SET timeOffGroup = :timeOffGroup, timeOffGroupColor = :timeOffGroupColor, dateModified = :dateModified',
    ReturnValues: 'ALL_NEW',
  };

  dynamoDb.update(params, (error, result) => {
    if (error) {
      console.error(error);
      callback(new Error('Couldn\'t update the todo item.'));
      return;
    }
    const response = {
      statusCode: 200,
      body: JSON.stringify(result.Attributes),
      headers: {
        "Access-Control-Allow-Origin" : "*", // Required for CORS support to work
        "Access-Control-Allow-Credentials" : true
      }
    };
    callback(null, response);
  });
};

The error I am getting is:

XMLHttpRequest cannot load https://pwqlomgq89.execute-api.us-east-1.amazonaws.com/dev/timeoffgroup/7d463800-0935-11e7-b618-4b1d72ddca8e?timeOffGroup=Holiday+edited. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 502. angular.js:14328 Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"PUT","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","data":{},"url":"https://pwqlomgq89.execute-api.us-east-1.amazonaws.com/dev/timeoffgroup/7d463800-0935-11e7-b618-4b1d72ddca8e","params":{"timeOffGroup":"Holiday edited"},"headers":{"Accept":"application/json, text/plain, /","Content-Type":"application/json;charset=utf-8"}},"statusText":""}

I have followed all of the calls on serverless tutorials to get the CORS to work. But it seems I got the get and create to work, but the PUT command is not working. Is there some place I need to still set the update command to allow PUT for cross domain?

Looks like I might need more here for a PUT method access: headers:

{
    "Access-Control-Allow-Origin" : "*", // Required for CORS support to work
    "Access-Control-Allow-Credentials" : true
}

Answer 1

It seems that your problem is that you don't handle the OPTIONS verb. See this answer to understand more about this requirement.

Before making the PUT request, the browser will preflight an OPTIONS request as a safety measure to ensure that this kind of request is expected by the server. If you don't support OPTIONS, it won't make the PUT request.

To fix this, change your serverless.yml file to add OPTIONS support.

functions:
  func:
    handler: handler.func
    events:
      - http: PUT foo/bar
      - http: OPTIONS foo/bar

Modify your handle with something like this:

module.exports.func = (event, context, callback) => {

  try {
    switch(event.httpMethod + ' ' + event.resource) {
      case 'PUT /foo/bar':
        handlePut(callback);
        break;
      case 'OPTIONS /foo/bar':
        handleOptions(callback);
        break;
      default:
        // return HTTP 400
    }
  }
  catch (err) {
     // return HTTP 500
  }
};

const handlePut = (callback) => {
    callback(null, { 
        statusCode: 200, 
        headers: {
            'Access-Control-Allow-Origin': '*'
        }, 
        body: JSON.stringify({
            message: 'PUT'
        })
    });
};

const handleOptions = (callback) => {
    callback(null, {
        statusCode: 200,
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'origin, content-type, accept',
            'Access-Control-Allow-Methods': 'POST, PUT, OPTIONS'
        }
    });
};

Answer 2

You can try by increasing the time out in lambda. This fixes CORS problem of mine.