Блог

Мне почти неловко задавать этот вопрос из-за поддержки CORS на SO, но я не могу пройти мимо:

 Access to XMLHttpRequest at 'https://a93xxxxx.execute-api.eu-west-1.amazonaws.com/dev[object Object]' from origin 'https://www.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
 

Я даже опубликовал свой проект React с помощью Amplify и попытался использовать его из реального доменного имени, чтобы даже исключить все, что связано со средой разработки (Cloud 9 работает под управлением npm версии 6.14.8)

Я также провел тест под управлением Chrome с флагом —disable-web-security .

Моя лямбда-функция содержит следующее (готовая заглушка)

 exports.handler = async (event) => {
// TODO implement
const response = {
    statusCode: 200,
//  Uncomment below to enable CORS requests
  headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers" : "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With",
      "Access-Control-Allow-Methods" : "OPTIONS,POST,GET,PUT"
    }

  , 
    body: JSON.stringify("Hello from Lambda!")
};
return response;
};
 

Обратите внимание, что я раскомментировал часть запроса CORS, а код состояния ответа установлен на 200.
Код в моем приложении, который выполняется при отправке формы отправки от клиента:

     uploadcontactusdata = async data => {
    try {
        console.log("Contact Us pressed")
        const settings = {
            method: 'POST',
            body: JSON.stringify(data),
            
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }
        }

        const fetchResponse = await API.post('econtactus', settings);
        Notification({
            title: 'Success',
            message: 'Notification has been sent',
            type: 'success'
        });
    }
    catch (err) {
        console.log("unable to send");
        console.error(err)
    }
}
 

Я создал API Gateway Lambda с помощью Amplify (версия 4.41.2). Не уверен, где еще искать сейчас. Любые подсказки будут оценены. Спасибо

Вы можете полностью отказаться от необходимости api gateway, используя appsync.

 amplify add api
 

Выберите graphql (я не пробовал использовать rest, но вам это не нужно) выберите базовую схему, отредактируйте ее, если хотите, и опубликуйте. После публикации вы можете создать свой собственный метод. Вы можете просмотреть это в интерфейсе AppSync в разделе Schema.

 type Mutation {
  yourMethod(input: Input!): TableName <-- add your method to the list
}
 

Теперь внутри Appsync выберите источники данных и добавьте источник данных. Дайте ему имя, выберите lambda в качестве типа, затем найдите свою лямбду в списке. После добавления вернитесь к своей схеме и найдите метод, который вы создали выше. На правой боковой панели найдите свой метод и нажмите ссылку прикрепить. Найдите источник данных, который вы только что добавили. Заполните регион и лямбда-ARN. УБЕДИТЕСЬ, что вы выбрали новую роль, а не существующую.

Возможно, вам потребуется настроить шаблоны запросов и ответов.

Для запроса:

 {
  "version" : "2017-02-28",
  "operation": "Invoke",
  "payload": $util.toJson($context.args)
}
 

Для ответа:

 $util.toJson($context.result)
 

Теперь вы можете вызывать свой lambda непосредственно из пользовательского интерфейса и возвращать результат, не беспокоясь о CORS или управлении шлюзом API.