У меня есть развернутое веб-приложение, оно построено с использованием интерфейса 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.

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

'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

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

Однако ошибка 1 сохраняется, даже когда я тестирую с помощью 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==

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

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

4
Josh 18 Сен 2018 в 16:50

2 ответа

Лучший ответ

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

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

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

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

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

На живую сцену:

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

Решил вопрос сразу.

0
Josh 19 Сен 2018 в 11:50

Здесь вы должны занести в белый список соответствующие заголовки 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:

нет - контроль доступ - Allow-Origin ошибки

Пользовательский CORS Cloudfront

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

2
Sangam Belose 19 Сен 2018 в 04:44