Angular AWS заблокирован политикой CORS
Привет, я создал шлюз API AWS, который обращается к лямбда-функции.
Если я пытаюсь вызвать в шлюз из Postman, все работает нормально. Но когда я пытаюсь вызвать API-интерфейс get с помощью своего приложения Angular, я получаю следующую ошибку:
Access to XMLHttpRequest at 'apiUrl' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Я создаю свой Angular Request со следующим кодом:
let params = new HttpParams().set('username','[email protected]').append('password','1234');
this.http.get(apiUrl, {params}).subscribe(
res => {alert('success');},
err => {alert('fail');}
)
Я уже включил CORS в своем шлюзе API. Надеюсь, вы, ребята, поможете мне вызвать мой AWS API.
Мой текущий метод выбора выглядит следующим образом: Ответ интеграции
Вы нашли решение?
Ответы 4
Вы правильно формируете свой запрос в Angular. Проблема не имеет ничего общего с клиентской частью вашего приложения, а связана с тем, как вы настроили поддержку CORS в AWS.
Postman получает доступ к вашему API в порядке, потому что Postman не применяет политику «того же происхождения», что и веб-браузер, то есть полностью обходит CORS.
Чтобы браузер успешно выполнил запрос, API должен ответить на запрос OPTIONS в той же конечной точке с кодом возврата 200 и включить в этот ответ заголовок Access-Control-Allow-Origin, либо указывающий фактическое происхождение запроса или подстановочный знак '*'.
Документация AWS по этому поводу достаточно ясна и обширна.
Привет, я уже добавил параметры в конечную точку и включил Access-Control-Allow-Origin в заголовок (скриншот в вопросе)
Если бы «обширная» документация AWS по этому вопросу была хотя бы отдаленно ясной, не было бы такого количества людей, сталкивающихся с той же проблемой, которую я вижу по всему Интернету, от собственных форумов AWS до практически где угодно. Если у stackoverflow.com/users/982341/greybeardedgeek есть конкретное четкое объяснение документации AWS, может ли он сослаться на него. Я там вообще ничего внятного не нашел. Возможно, проще использовать интерфейс командной строки, но я считаю, что графический пользовательский интерфейс API Gateway в лучшем случае сбивает с толку.
В шлюзе API в разделе «Ресурсы» -> «Действия». В раскрывающемся списке «Действия» есть возможность включить CORS. Проверьте, включены ли CORS и разрешены ли все источники.
Вам нужно отправить ответ от вашего API (на стороне сервера), этот ответ должен включать:
'Access-Control-Allow-Origin':'*'
Вот пример отправки ответа через Lambda(.js):
function buildResponse(statusCode, body) {
return {
statusCode: statusCode,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin':'*'
},
body: JSON.stringify(body)
}
}
Просто добавьте это в свой лямбда-код и вызывайте его, когда возвращаете ответ.
Подсказка: statusCode может быть 200, а тело вашего «ответа».
Ваш код в Angular в порядке.
let params = new
HttpParams().set('username','[email protected]').append('password','1234');
this.http.get(apiUrl, {params}).subscribe(
res => {alert('success');},
err => {alert('fail');}
)
Произошла ошибка при отправке заголовка.
- В AWS API Gateway для нужного API в меню слева выбирается вкладка
Resources. - Выбран метод
GET - В раскрывающемся меню
ActionsнажмитеEnable CORS.
- В поле для
Access-Control-Allow-Headersв самом конце и перед'отделить запятой и добавитьAccess-Control-Allow-Origin. - В поле ниже для
Access-Control-Allow-Originнеобходимо ввести'*' - Настройте параметры кнопкой
Enable CORS and replace existing CORS headers
Также добавьте заголовок GET -> Integration Request -> HTTP Headers. name — это Access-Control-Allow-Origin, а Mapped from — это '*'.
Также проверьте заголовки в Postmen. Для тестирования.
Каков код состояния HTTP ответа?