Шлюз AWS API возвращает access-control-allow-origin, что не разрешено Access-Control-Allow-Headers в предварительном ответе - PullRequest
Новая
       22

Шлюз AWS API возвращает access-control-allow-origin, что не разрешено Access-Control-Allow-Headers в предварительном ответе

0 голосов
/ 18 апреля 2019

Может показаться, что об этом спрашивали миллион раз, но я попытался добавить и мой фронтенд (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'
            }
        });
  • Я протестировал свою лямбда-функцию с консоли, и она работает (умеет делать CRUD для DynamoDB).
  • Я включил CORS для своих ресурсов шлюза API и развернул API.
  • Я пытался использовать PostMan с: 
Headers:Content/Type: application/json
Authorization: <MY_TOKEN>
*With and without* Access-Control-Allow-Origin: *

и это работает: запрос успешно отправляется из PostMan в API Gateway, и в моем DynamoDB появляется новый элемент.

Ответы [ 4 ]

1 голос
/ 18 апреля 2019

Фактически добавление некоторых данных в заголовок преобразует запрос POST в OPTIONS. Так что, он будет запускать запросы:

1) с методом OPTIONS

2) После получения успешного ответа на запрос OPTIONS произойдет фактический вызов API.

Для обработки CORS вы должны использовать это в бэкэнде.

1 голос
/ 18 апреля 2019

Просто чтобы пролить свет на проблему.Некоторые браузеры выполняют предварительную проверку вашей конечной точки.Это означает, что ваша конечная точка будет вызываться методом OPTIONS, прежде чем вы вызовете ожидаемый метод POST.В AWS перейдите в API Gateway и создайте новый ресурс, отметьте опцию «Создать параметры», которая создаст заголовки ответов по умолчанию, которые необходимо добавить в конечную точку.

1 голос
/ 18 апреля 2019

CORS требует прямого соединения между клиентом и сервером.Ваш браузер может блокировать соединение по соображениям безопасности.

HTTP против HTTPS

Я также попытался бы разрешить загрузку в вашем браузере.

Я полагаю, вам также следует добавитьна ваш токен в заголовке авторизации, например:

'Bearer TOKEN_VALUE'

0 голосов
/ 18 апреля 2019

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

Мое плохое: у меня есть оба таких ресурса: 

/notes/ (method: any)
/notes/{noteid} (method: any)

, а URL-адрес Invoke буквально <path>/notes/{noteid} (с {} включен в строку) в AWS API Gateway.Я предполагал, что это будет что-то вроде /notes/:noteid

Так что код внешнего интерфейса должен быть таким: 

return API.post("notes", "/notes/{noteid}", {...}
...