Ошибка предварительной проверки запроса GET в браузере (с использованием платформы React)

Я пытаюсь отправить запрос API GET с заголовком Authorizer. Запрос отлично работает с curl и Postman: Ответ Postman

Если я отправляю запрос GET без заголовка Authorizer, он работает, как и ожидалось, но как только я добавляю заголовок, он отправляет ОПЦИИ предварительной проверки и не работает.

Это мой код:

function GetData() {
    var req = new XMLHttpRequest();
    req.addEventListener("load", () => {
      console.log(req.responseText);
    });
    req.open(
      "GET",
      "https://qrdc992lul.execute-api.eu-west-1.amazonaws.com/dev/account"
    );
    req.setRequestHeader("Authorization", "Bearer " + token);
    req.withCredentials = true;
    req.send();
  }

Я получаю следующий ответ:

Не удалось загрузить ресурс: сервер ответил статусом 403 ()

Доступ к XMLHttpRequest по адресу 'https://qrdc992lul.execute-api.eu-west-1.amazonaws.com/dev/account' из источника 'https://ogx7o.csb.app» заблокирован политикой CORS: ответ на предварительный запрос не проходит проверку управления доступом: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Заголовок ответа:

длина контента: 42 тип контента: приложение/json дата: вторник, 04 февраля 2020 г. 13:09:37 статус по Гринвичу: 403 через: 1.1 37adc88abfddc6deef6672a655706cd4.cloudfront.net (CloudFront) x-amz-apigw-id: HX36rHhxDoEFXxw= x -AMZ-CF-ID: HGFVOQWVQ96UGE3CIWWVD41RCNYX1OZYVYDPIYXQPQXE0AAEKLM2WA == x-AMZ-CF-POP: MAN50-C3 X-AMZN-ERRORTYPE: Отсутствуйте OATHUTHENTICATIONTOKEXEXCECTION X-AMZN-RECKETIDIPE.

Я читал о заголовках CORS и предварительной проверке, и я как бы понял, что проблема в том, что в заголовке ответа нет Access-Control-Allow-Origin, но я не знаю, как решить эту проблему.

Я добавил фрагмент кода в Codesandbox: https://codesandbox.io/s/fragrant-river-ogx7o

API — это интеграция API Gateway Lambda Proxy.

Я все еще изучаю React, и у меня такое чувство, что я неправильно отправляю запрос. Что мне не хватает?

ОБНОВЛЕНИЕ: Шлюз API настроен на возврат заголовков


reactjs javascript api cors preflight
person Anita Ernszt    schedule 04.02.2020    source источник
comment
Отвечает ли это на ваш вопрос? XMLHttpRequest не может загрузить XXX Нет "Access-Control-Allow- Заголовок происхождения   -  person imjared    schedule 04.02.2020
comment
Попробуйте удалить строку req.withCredentials = true;   -  person Anurag Hazra    schedule 04.02.2020

Ответы (2)


arrow_upward
0
arrow_downward

Я нашел ответ. Если кто-то найдет этот вопрос позже, я решил следующим образом:

  • Поскольку предварительная отправка запроса OPTIONS также требует конечной точки API. Таким образом, вам нужны как GET, так и OPTIONS, и настроить заголовки ответа метода для обоих.

    /account
    ПОЛУЧИТЬ
    ПАРАМЕТРЫ

Шлюз API -> Ресурс -> Действия -> Включить CORS подскажет, что делать.

  • Код был неверным. Как предложил Анураг Хазра, req.withCreditentials = true; был удален
person Anita Ernszt    schedule 04.02.2020

arrow_upward
-1
arrow_downward

В вашей серверной части вам нужно будет авторизовать заголовок, который вы добавляете, используя Access-Control-Allow-Headers (это для заголовка "Авторизация", который вы добавляете)

person Dani Toker    schedule 04.02.2020