无服务器和 PUT 命令的 CORS 问题

Question

我在使用 Serverless 和 AWS 时遇到了另一个 CORS 问题。似乎我需要专门告诉它以允许 PUT 方法，但我不确定这段代码的去向。我的 Lambda 函数有以下代码：

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);
  });
};

我得到的错误是：

XMLHttpRequest 无法加载 https://pwqlomgq89.execute-api.us-east-1.amazonaws.com/dev/timeoffgroup/7d463800-0935-11e7-b618-4b1d72ddca8e?timeOffGroup=Holiday+edited。 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:9000” 使用权。响应的 HTTP 状态代码为 502。 angular.js:14328 可能未处理的拒绝： {"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":"假日 已编辑"},"headers":{"Accept":"application/json, text/plain, /","Content-Type":"application/json;charset=utf-8"}},"statusText":""}

我已关注无服务器教程中的所有调用，以使 CORS 正常工作。但似乎我得到了 get 和 create 工作，但 PUT 命令不起作用。是否有一些地方我仍然需要设置更新命令以允许跨域 PUT？

看起来我可能需要更多的 PUT 方法访问： 标题：

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

Answer 1

看来您的问题是您没有处理 OPTIONS 动词。请参阅此answer 以了解有关此要求的更多信息。

在发出PUT 请求之前，浏览器将预检OPTIONS 请求作为安全措施，以确保服务器预期这种请求。如果您不支持OPTIONS，则不会发出PUT 请求。

要解决此问题，请更改您的 serverless.yml 文件以添加 OPTIONS 支持。

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

用这样的方式修改你的句柄：

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

您可以尝试增加 lambda 中的超时时间。这解决了我的 CORS 问题。