Запрос Amazon Cross-Origin заблокирован:

Question

Наш бэкэнд построен на Angular 4 и развернут на AWS S3 с использованием Serverless. Все работает очень хорошо, но у нас есть одна маленькая проблема. Если пользовательский заголовок добавлен, он выдает предупреждение следующим образом.

"Запрос перекрестного источника заблокирован: та же политика происхождения запрещает чтение удаленного ресурса по адресу https://7uqw9ghjr7.execute -api.eu-west-2.amazonaws.com/uat/user. (Причина: отсутствует токен 'app_version' в заголовке CORS 'Access-Control-Allow-Headers' из канала предварительной проверки CORS). "

" Cross-Оригинальный запрос заблокирован: та же политика происхождения запрещает чтение удаленного ресурса по адресу https://7uqw9ghjr7.execute -api.eu-west-2.amazonaws.com / uat / user . (Причина: запрос CORS не был выполнен успешно). "

" app_version "- это пользовательский заголовок, который я добавил.

Если я удалю этот пользовательский заголовок, все будет работать нормально.

Я был быблагодарю за любую помощь.

Мне нужно исправить эту проблему "Запрещен перекрестный запрос" и добавить свой настраиваемый заголовок.

Это код HttpHeader, который включается в каждый вызов API REST

headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'app_version': '1.0'
  })

Answer 1

«Наш бэкэнд построен на Angular 4 и развернут на AWS S3 с использованием Serverless.»: Возможно, вы имели в виду, что веб-интерфейс взаимодействует с какой-либо службой REST API из вашего бэкэнда (?).

ВыЯ могу немного прояснить ваш сценарий, но, основываясь на ваших последних строках: «Это код HttpHeader, включаемый в каждый вызов REST API». Я могу сделать вывод, что это классическая ошибка CORS при работе с API-шлюзом с помощью метода Lambda Proxy, помните, как этоБезсерверный фреймворк работает на нем по умолчанию. Пожалуйста, прочитайте: https://serverless.com/framework/docs/providers/aws/events/apigateway/

Таким образом, вы всегда должны возвращать полный набор заголовков в своем ответе, позволяя совместное использование ресурсов из разных источников:

let response = {
    statusCode: 200,
    headers: {
        //"Content-Type": "application/json",
        "X-Requested-With": '*',
        "Access-Control-Allow-Headers": 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Requested-With',
        "Access-Control-Allow-Origin": '*',
        "Access-Control-Allow-Methods": 'GET, OPTIONS',
        "Access-Control-Allow-Credentials": true// Required for cookies, authorization headers with HTTPS 
    },
    body: body
}

Это может привести к некоторымв некоторых случаях это утомительное занятие, поэтому вы можете проверить решения как Middy, которые работают очень хорошо: https://github.com/middyjs/middy