Может показаться, что об этом спрашивали миллион раз, но я пытался добавить как в свой интерфейс (React), так и в серверную часть (Lambda с Node.js):
Access-Control-Allow-Headers
Access-Control-Request-Headers
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
Но я все еще получаю эту ошибку:
Access to XMLHttpRequest at 'https://<API-INVOKE-URL>/prod/notes' 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.
Вот мой лямбда-код для обработки ответа:
function buildOutput(statusCode, data) {
let _response = {
statusCode: statusCode,
headers: {
"Access-Control-Allow-Origin": "*"
},
body: JSON.stringify(data)
};
return _response;
};
Вот мой код React для отправки запроса POST:
createNote(note) {
return API.post("notes", "/notes", {
headers: {
"Authorization": this.state.token,
"Access-Control-Allow-Origin": "*"
},
body: {
userid: this.state.username,
noteid: 'new',
content: 'from frontend'
}
});
Headers:Content/Type: application/json
Authorization: <MY_TOKEN>
*With and without* Access-Control-Allow-Origin: *
и это работает: запрос успешно отправлен из PostMan в API Gateway, что приводит к появлению нового элемента в моей DynamoDB.
Я пробовал это. Это тоже не работает.





CORS требует прямого соединения между клиентом и сервером. Ваш браузер может блокировать соединение из соображений безопасности.
HTTP против HTTPS
Я бы также попробовал включить загрузку в вашем браузере.
Я считаю, что вы также должны добавить носитель к своему токену в заголовке авторизации, например:
'Носитель TOKEN_VALUE'
На самом деле добавление некоторых данных в заголовок преобразует POST-запрос в OPTIONS. Таким образом, он будет запускать запросы:
1) методом ВАРИАНТЫ
2) После получения успешного ответа на запрос OPTIONS произойдет фактический вызов API.
Для обработки CORS вы должны использовать это в бэкэнде.
Просто чтобы пролить свет на проблему. Некоторые браузеры выполняют «предварительную проверку» вашей конечной точки. Это означает, что вы вызовете вашу конечную точку с помощью метода OPTIONS до того, как вызовете метод POST, который вы ожидаете. В AWS перейдите в API Gateway и создайте новый ресурс, установите флажок «Создать параметры», чтобы создать заголовки ответов по умолчанию, которые необходимо добавить в конечную точку.
Спасибо вам, ребята. Я проголосовал за ваши ответы/предложения. Я уверен, что они полезны в большинстве случаев. Я понял, почему у меня была эта ошибка.
Мое плохое: у меня есть оба ресурса:
/notes/ (method: any)
/notes/{noteid} (method: any)
и URL-адрес вызова буквально <path>/notes/{noteid} (с включенным в строку {}) в AWS API Gateway. Я предполагал, что это будет что-то вроде /notes/:noteid
Таким образом, код внешнего интерфейса должен быть таким:
return API.post("notes", "/notes/{noteid}", {...}
Я думаю, вы должны разрешить происхождение заголовка вместе с вашим ответом API от бэкэнда.