AWS API Gateway с Angular

Команда Api Gateway здесь.

Надеюсь, вы уже ознакомились с новой функцией «Включить CORS» в консоли. Даже если ваш рабочий процесс разработки находится за пределами консоли, вы можете быстро настроить тестовый API и посмотреть конфигурации заголовков, которые консоль устанавливает для вас, а затем скопировать их в свой Swagger def или любое другое решение, которое вы придумали.

Руководство по документации должно применяться в любом случае. Вам понадобятся 3 заголовка: Access-Control-Allow-Methods, Access-Control-Allow-Origin и Access-Control-Allow-Headers. Их значения будут зависеть от вашего API.

Если вы хотите отправить мне ресурс API, который вы пытаетесь вызвать, я могу взглянуть с нашей стороны.

В настоящее время у меня есть функция POST, работающая через API Gateway и Lambda, доступ к которой осуществляется из клиента Angular с CORS. Хотя я не знаю, какова ваша конфигурация, я могу поделиться всеми своими соответствующими настройками в надежде, что, возможно, вы найдете что-то, что вы пропустили. Включение CORS на данный момент является довольно сложной задачей (и, надеюсь, это то, что Amazon работает над исправлением), требуя множества небольших шагов во многих областях с довольно плохой документацией.

У меня есть 2 метода (OPTIONS и POST) для моего ресурса, и я поделюсь соответствующими настройками для каждого:

POST:
Запрос метода: ничего особенного. В случае моей конечной точки у меня есть опция в разделе «Пути запроса» для одного из моих параметров маршрута. Я не использую строку запроса, поэтому строка запроса URL пуста. Заголовки HTTP-запроса также пусты.

Запрос на интеграцию:
Тип интеграции: Шаблоны лямбда-сопоставления: у меня есть один (application / json) с шаблоном для передачи соответствующих значений из тела запроса и параметров маршрута в мою лямбда-функцию.

Ответ метода:
Разверните поле кода состояния 200. Добавьте заголовок для «Access-Control-Allow-Origin» и нажмите кнопку с галочкой, чтобы сохранить его. Возможно, вам придется сделать это для любых других кодов состояния, которые могут у вас быть.

Ответ интеграции:
Разверните поле состояния ответа 200. В разделе «Сопоставления заголовков» измените значение сопоставления, чтобы оно содержало «*». Обязательны одинарные кавычки. Возможно, вам придется сделать это для любых других ответов на интеграцию, которые могут у вас возникнуть.

ВАРИАНТЫ:
Запрос метода:
Ничего особенного, как и метод POST.

Запрос на интеграцию:
Я настроил имитацию интеграции. Согласно Amazon, это не имеет значения, поэтому я просто установил имитацию, поскольку все, что нам действительно нужно сделать, это ответить 200 с соответствующими заголовками. Нет шаблонов сопоставления.

Ответ метода:
Разверните поле кода состояния 200. Добавьте следующие 3 заголовка ответа и сохраните их, установив флажок: Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control. -Allow-Origin. Других кодов состояния нет.

Ответ интеграции:
Разверните поле состояния ответа 200. Регулярное выражение пусто (установлено по умолчанию), и этот метод имеет только ответ 200. Разверните сопоставления заголовков и установите для заголовков следующие значения сопоставления:

Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Requested-With'
Access-Control-Allow-Methods: 'GET,POST,OPTIONS'    
Access-Control-Allow-Origin:  '*'

Нет шаблонов сопоставления.

Затем разверните свой API. Надеюсь, теперь он разрешает запросы CORS. Я столкнулся с той же проблемой, что и вы, и я почти уверен, что проблема заключалась в отсутствии значения X-Requested-With в Access-Control-Allow-Headers.

Вы можете «Включить CORS» в AWS API Gateway. Войдите в свою учетную запись AWS и перейдите в API Gateway. Выберите ресурс в разделе Ресурсы и выберите включить CORS в раскрывающемся меню действий. Это включит CORS для всех методов ресурса. Пожалуйста, проверьте ссылку ниже для получения подробной информации

https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

TL; DR; Это не проблема CORS, проблема исходит из шлюза API, проверьте проблему в обработчике API на шлюзе API. Убедитесь, что ваш API может работать с Postman, прежде чем использовать его в своем проекте пользовательского интерфейса.

Вы можете следовать этому руководству как использовать CORS . Но похоже, что вы уже сделали это действие.

Как вы можете видеть здесь, перед тем, как ваш фактический запрос был отправлен на API-шлюз, ваш браузер отправил запрос OPTIONS на API-шлюз, чтобы убедиться, что ваш запрос разрешен для отправки на API-шлюз. Если запрос OPTIONS вернет 200, ваш фактический запрос будет отправлен в API Gateway.

1. Если ваш запрос OPTIONS не удался. Тогда ваш запрос не может быть отправлен на API Gateway. В инструментах разработчика вы увидите что-то вроде No 'Access-Control-Allow-Origin' is present on the requested resource..., но сообщений об ошибке больше нет. Запрос вернет статус 0 -> Вам необходимо настроить CORS.

2. Еще один случай - это то же самое, что вы объясняете в своем вопросе. Получил HTTP Status Code 500, а также кое-что о CORS. Это не проблема CORS, я думаю, проблема браузера. В этом случае OPTIONS запрашивает код состояния возврата 200. Фактический код состояния возврата запроса 500 означает, что ваш API уже сломан. Браузер по-прежнему отправляет No 'Access-Control-Allow-Origin' is present on the requested resource... ошибку. В этом случае вам нужно отладить свой API, чтобы увидеть проблему.

Надеюсь, это поможет!

Поскольку ваша ошибка говорит: «На запрошенном ресурсе нет заголовка 'Access-Control-Allow-Origin'». похоже, что когда вы пытаетесь вызвать API из Angular, он не получает заголовок Access-Control-Allow-Origin, который был настроен, когда вы следовали документам Amazon.

Во-первых, я бы дважды проверил, что вы вызываете правильный URL-адрес для API. Amazon отображает это на экране этапов, но вы должны добавить сценическое имя к URL-адресу, который они вам показывают. Итак, если вы развернулись на стадии "прод", и они отображают

https://xyz.execute-api.us-west-2.amazonaws.com/my-api

Вам нужно позвонить

https://xyz.execute-api.us-west-2.amazonaws.com/my-api/prod

Затем я бы попробовал вызвать метод OPTIONS в вашем API от почтальона. После изменения метода POST на OPTIONS и вызова API проверьте заголовок в разделе результатов Postman. Вы хотите видеть там следующее:

Access-Control-Allow-Methods → POST,OPTIONS
Access-Control-Allow-Origin → *

Если вы не видите их в ответе, дважды проверьте ответ метода под методом OPTIONS в вашем API. Убедитесь, что эти заголовки добавлены для ответа 200.

В качестве последнего результата вы можете попробовать использовать кнопку «Включить CORS», которую недавно добавила Amazon. Выберите свой ресурс в дереве слева и найдите кнопку «Включить CORS» в правом верхнем углу. Щелкните по нему, и AWS воссоздает все методы, связанные с CORS.

Я надеюсь, что некоторые из этих шагов помогут!