Ошибка CORS, несмотря на «Access-Control-Allow-Origin», указанный в Lambda-ответе при использовании Lambda, API Gateway и Cloudfront - PullRequest
0 голосов
/ 18 сентября 2018

У меня есть развернутое веб-приложение, оно построено с использованием интерфейса React & Redux, размещенного на S3, и нескольких внутренних микро-сервисов, размещенных на AWS Lambda и доступных через API Gateway, которые были развернуты с помощью Serverless.Сайт также распространяется через CloudFront CDN.

Микро-сервисы взаимодействуют с несколькими внешними сервисами, но основной из тех, которые меня интересуют, это сервис get-products, который запрашивает базу данных продуктов Stripe и возвращает продукты воттуда мое приложение React.

Сайт работал нормально до вчерашнего дня, когда я развернул некоторые новые (в основном косметические) изменения во внешнем интерфейсе и добавил еще несколько SKU в базу данных Stripe.После добавления этих изменений я начал испытывать ошибки CORS там, где их раньше не было.

Изначально я получил следующую ошибку:

Access to XMLHttpRequest at 'https://XXXXXXXXXX.execute-api.eu-west-1.amazonaws.com/dev/products' from origin 'https://www.superfunwebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Это несмотря на мой лямбда-ответ, включающий следующие заголовки:

'Access-Control-Allow-Origin': '*',

На этом этапе я обновил заголовки ответов Lambdas следующим образом:

'Access-Control-Allow-Origin': 'https://www.superfunwebsite.com/',
'Access-Control-Allow-Credentials': true

Ошибка в основном сохранилась, за исключением одной случайной загрузки страницы, где вместо этого я получил ошибкузаявляя, что Origin https://www.superfunwebsite.com и 'Access-Control-Allow-Origin' https://www.superfunwebsite.com/ не совпадают.

С тех пор я изменил заголовки Lambda-ответа на:

'Access-Control-Allow-Origin': 'https://www.superfunwebsite.com',
'Access-Control-Allow-Credentials': true

Кажется, что это могло решить эту аномальную вторую ошибку.

Однако ошибка одна сохраняется, даже когда я тестирую с использованием HTTP-клиента, такого как Insomnia.В ответ я получаю следующее:

// status code
403

// response
{
  "message": "Forbidden"
}

// headers
Content-Type: application/json
Content-Length: 23
Connection: keep-alive
Date: Tue, 18 Sep 2018 13:22:41 GMT
x-amzn-RequestId: eb691541-bb45-11e8-82ff-6d1b542dffb9
x-amzn-ErrorType: ForbiddenException
x-amz-apigw-id: NaxVLGJgjoEF5Fg=
X-Cache: Error from cloudfront
Via: 1.1 08037e15a3c6f503f39825efeb7f0210.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cbNtb4xKWc48VPFon-Cl9y27KmXRVLIN5SWuYwNWlWsTXeaAXx3z-Q==

Исходя из вышеприведенного вывода о бессоннице, мне кажется, что моя проблема как-то связана с CloudFront, хотя я точно не понимаю, как именно. Этот другой пост S / O , кажется, указывает на то, что для меня должны быть опции в разделе поведения CloudFront, которые позволили бы мне добавлять заголовки в белый список для ответа, однако эти опции не видны мне в консоли,Я видел предположения, что это потому, что источник находится на S3.

Мой вопрос заключается в том, просто ли кто-нибудь знает, как я могу решить эту проблему, или если есть что-то еще, что я не считал, что я должен смотреть на

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Эта проблема теперь решена.В конце концов, это была не проблема CORS, а поэтапная.Мой запрос не удался, потому что я запрашивал этап конечной точки, который не существовал.

Похоже, что в настройках, которые я использовал CloudFront и API Gateway, при запросе конечной точки, которая не существует, мне возвращали403 ответ без заголовков CORS.

Браузер / CloudFront (не уверен, какой) затем определил отсутствие заголовков CORS и выдал ошибку в ответ на это.

В моем случае просто изменивмоя конечная точка из стадии разработки (которой не было в связанной учетной записи AWS, связанной с этапом live):

https://XXXXXXXXXX.execute-api.eu-west-1.amazonaws.com/dev/products

до этапа live:

https://XXXXXXXXXX.execute-api.eu-west-1.amazonaws.com/live/products

Решение проблемы немедленно.

0 голосов
/ 18 сентября 2018

Здесь вы должны внести в белый список соответствующие заголовки CORS в разделе поведения дистрибутива облачного фронта.

  1. Откройте свой дистрибутив из консоли Amazon CloudFront
  2. Выберите представление «Поведение».
  3. Выберите «Создать поведение» или выберите существующее поведение, а затем нажмите «Редактировать».
  4. Для параметра Cache Based on Selected Request Headers выберите «Белый список».
  5. В разделе «Заголовки белого списка» выберите заголовки (Access-Control-Request-Headersи Access-Control-request-methods, Origin) в меню слева и затем выберите Добавить.
  6. Выберите Да, Изменить.

enter image description here

Вышеуказанные настройки должны работать для вас (как, в основном, для GET и HEAD), но если это не так, включите метод OPTIONS, также используя статью ниже.Пожалуйста, проверьте следующую статью от aws:

no-access-control-allow-origin-error

Custom CORS Cloudfront

повышенная CloudFront-настройка

...