API GATEWAY - Ответ на предварительный запрос не проходит проверку контроля доступа: нет «Access-Control-Allow-Origin» при вызове API с локального хоста

Question

Я пытаюсь получить доступ к DynamoDB из приложения реакции, используя Api Gateways и функции Lambda.

Я сделал API и протестировал метод post в https://apitester.com/, он работает нормально , Я отправляю полезную нагрузку типа {"command": "getall"} и получаю ответ: {"statusCode": 200, "body": "\"Hello from Lambda!\""}

Но когда я вызываю API из приложения реагирования, я получаю эту ошибку:

Access to XMLHttpRequest at 
'https://9xovixi3ua.execute-api.us-east-2.amazonaws.com/default/bmsa-calc-admin' 
from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request 
doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested 
resource.

Мой код выглядит так this:

async function getUser() {
  axios.post('https://9xovixi3ua.execute-api.us-east-2.amazonaws.com/default/bmsa-calc-admin', 
  {
    command: 'getall'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

В консоли API Gateway я добавил метод OPTIONS, а затем заголовок ответа метода Access-Control-Allow-Origin

Заранее спасибо!

Answer 1

Итак, я сделал пару вещей, чтобы заставить это работать. Я добавил заголовки ответа с соответствующими значениями отображения, такими как , который этот парень делает . Вы можете видеть это на картинке из вопроса.

Затем, как и в моем случае, API запускает функцию Lambda, я добавил это к возвращаемому значению функции (python):

'headers': { 
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST, PUT, GET, OPTIONS',
            'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With'
        }

Итак, полный возврат выглядит следующим образом:

return {
        'statusCode': 200,
        'body': json.dumps('Hello from Lambda!'),
        'headers': { 
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST, PUT, GET, OPTIONS',
            'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With'
        }
    }

Это работает нормально, хотя я не уверен, что понимаю, что на самом деле происходит, поэтому, если кто-то захочет объяснить больше в комментарии, было бы здорово.