Не удается выполнить предварительный просмотр запроса GET в браузере (с использованием инфраструктуры React) - PullRequest
0 голосов
/ 04 февраля 2020

Я пытаюсь отправить запрос API GET с заголовком Authorizer. Запрос отлично работает с curl и 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 GMT: 403 через: 1.1 37adc88abfddc6deef6672a655706cd4.cloudfront. net (CloudFront) x-amz-apigw-id: HX36rHhxDoEFXxw = x-amz-cf-id: hgFyWyWXWQWWQWW3WQWGWQWGWQWW3WQ3 = x-amz-cf-pop: MAN50-C3 x-amzn-errortype: MissingAuthenticationTokenException x-amzn-requesttid: 4383a667-e30b-44fb-ac3b-bd532e99f1d4 x-кэш: ошибка в облачном фронте

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

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

API - это интеграция Lambda Proxy с API-интерфейсом шлюза.

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

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

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

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

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

    / account
    GET
    OPTIONS

API Gateway -> Resource -> Действия -> Включить. CORS подскажет, что делать

  • Код был неверным. По предложению Анурага Хазры, req.withCreditentials = true; был удален
0 голосов
/ 04 февраля 2020

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...