Реагировать на вызов лямбда-функции PUT Node.js с помощью API Gateway

Question

Я читал различные вопросы и ответы на сайте и не смог решить мою проблему.

Я пытаюсь создать безсерверное приложение CRUD с React, используя функции Lambda и базу данных DynamoDB.

У меня работают функции GET и POST.Я сейчас работаю над PUT и DELETE.

Я использую localhost для тестирования.

Это мой код, вызывающий лямбду,

onSubmit = (event) => {
        event.preventDefault();
        console.log('onSubmit state', this.state);

        const { id, record, album, artist, date, imageUrl } = this.state;

        fetch("https://link.execute-api.us-east-1.amazonaws.com/RecordShop/", {
            method: 'PUT',
            headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            },      
            body: JSON.stringify({records: id, record, album, artist, date, imageUrl})
        });

        // this.props.getRecords();
        this.handleClose(); 

    }

Это мой PUTЛямбда-функция

console.log('Loading function');
let doc = require('dynamodb-doc');
let db = new doc.DynamoDB();

exports.handler = function(event, context) {
    let item = {
        "id" : event.id,
        "record" : event.record,
        "album" :  event.album,
        "artist" : event.artist,
        "date" : event.date,
        "imageUrl" : event.imageUrl
    };
     let params = {
         TableName: process.env.TABLE_NAME, 
         Item: item
    };
        console.log(params);
    db.putItem(params,function(err,data){
        if (err) console.log(err);
        else console.log(data);
    });
};

С помощью запроса PUT я могу успешно протестировать ее в своей лямбда-функции и обновить ее базу данных.Я использую Chrome и видел, что он не поддерживает CORS, поэтому я установил расширение Chrome, которое позволяет ему, и установил для входящих URL-адресов значение localhost.Я также попробовал Firefox и получил следующую ошибку:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading 
the remote resource at https://vv2qx5zqb7.execute-api.us-east- 
1.amazonaws.com/Dev/. (Reason: missing token ‘access-control-allow- 
origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS 
preflight channel).[Learn More]"

. После этого я изучил дополнительные сведения и увидел следующее:

"В ответе на запрос CORS отсутствует требуемый доступ-Control-Allow-Origin заголовок, который используется, чтобы определить, можно ли получить доступ к ресурсу с помощью контента, работающего в текущем источнике. "

Поэтому я добавил Allow-Origin в свой код заголовка реакции, как рекомендованои это не сработало.

headers: {
            'Accept': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json'
        },     

В Chrome я получаю эту ошибку,

Access to fetch at 'https://execute-api.us-east- 
1.amazonaws.com/stagename/' from origin 'http://localhost:3000' has 
been 
blocked by CORS policy: Request header field access-control-allow- 
origin is not allowed by Access-Control-Allow-Headers in preflight 
response.

Поэтому я посмотрел и поиграл с настроенным API-шлюзом и попытался включитьИнтеграция Lambda Proxy с моей заявкой на получение и получением запроса без удачи.

Я знаю, что это проблема соединения между моим вызовом кода и шлюзом API. Я просто не уверен, что мне нужно изменить в шлюзе, чтобы он принял изменения.

Если кто-либоесть какие-то идеи, я бы очень признателен.

Answer 1

Вам необходимо приложить Access-Control-Allow-Origin в ответе с вашего сервера. Не имеет значения, если прикреплено клиентом в запросе. Ваш лямбда-ответ должен выглядеть следующим образом:

{
  statusCode: 200,
  headers: {
    'Access-Control-Allow-Origin': 'https://yourdomain.com' // Or use wildard * for testing
  },
  body: JSON.stringify(data)
}

Если Lambda runtime - Node.js 8.10

console.log('Loading function');
let doc = require('dynamodb-doc');
let db = new doc.DynamoDB();

exports.handler = (event) => {

    function formatResponse(data, code) {
      return { 
        statusCode: code,
        headers: {
          'Access-Control-Allow-Origin': 'https://yourdomain.com' // Or use wildard * for testing
        },
        body: JSON.stringify(data)
      }
    }

    let item = {
      "id" : event.id,
      "record" : event.record,
      "album" :  event.album,
      "artist" : event.artist,
      "date" : event.date,
      "imageUrl" : event.imageUrl
    };

    let params = {
      TableName: process.env.TABLE_NAME, 
      Item: item
    };

    console.log(params);

    db.putItem(params, function(err, data) {
      if (err) return formatResponse(err, 400);
      else return formatResponse(data, 200);
    });
};

Если время выполнения Lambda

console.log('Loading function');
let doc = require('dynamodb-doc');
let db = new doc.DynamoDB();

exports.handler = (event, context, callback) => {

    function formatResponse(data, code) {
      return { 
        statusCode: code,
        headers: {
          'Access-Control-Allow-Origin': 'https://yourdomain.com' // Or use wildard * for testing
        },
        body: JSON.stringify(data)
      }
    }

    let item = {
      "id" : event.id,
      "record" : event.record,
      "album" :  event.album,
      "artist" : event.artist,
      "date" : event.date,
      "imageUrl" : event.imageUrl
    };

    let params = {
      TableName: process.env.TABLE_NAME, 
      Item: item
    };

    console.log(params);

    db.putItem(params, function(err, data) {
      if (err) callback(null, formatResponse(err, 400));
      else callback(null, formatResponse(data, 200));
    });
};