Ошибка CORS при попытке доступа к конечной точке шлюза API

Я пытаюсь разместить веб-сайт на S3. Сайт запустит лямбда-функцию и выполнит некоторые действия. Мне удалось разместить сайт и получить к нему доступ. Создал лямбда-функцию. Создал API Gateway API, метод (POST) и сцену. Однако даже после включения CORS у меня все еще появляется то же сообщение (ошибка CORS).

Вот мои шаги на API-шлюзе:

  1. Создать API – REST API
  2. Тип конечной точки API: Региональный
  3. Создайте ресурс. Создал ресурс с названием «Загрузить». Установлен флажок «CORS (совместное использование ресурсов между источниками)». [Создайте метод OPTIONS, который разрешает все источники, все методы и несколько общих заголовков.]
  4. Создайте метод. Имя Должность
  5. Включен CORS для метода POST. Выбрал метод POST.
  6. Обновлен мой main.js с URL-адресом конечной точки.

Доступ для загрузки по адресу «https://ewe5juroi8.execute-api.sa-east-1.amazonaws.com/ProdX/upload» из источника «http://dataextractorbucket.s3-website-sa-east-1.amazonaws». com» заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Если непрозрачный ответ соответствует вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

В заголовке ответа на запрос я заметил следующее: «BadRequestException» НО URL-адрес имеет правильный формат.

Проверьте изображение ниже:

Кроме того, ответ имеет упомянутый заголовок.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я ответил на аналогичный вопрос 14 июня. Пожалуйста, зайдите в мой профиль и проверьте его. Дайте мне знать, если это сработает для вас.

В конце концов, проблема не была связана с CORS. Это было связано с тем, что лямбда-функция не могла правильно обработать. Ответ HTTP 400, который я получил, был получен либо от шлюза API, либо от вашей лямбда-интеграции, сообщая вам, что запрос каким-то образом неверен. Возможно, API GW выполняет какую-то проверку входных данных по запросу или это делает лямбда-сервис. Причина ошибки CORS заключается в том, что ответ об ошибке HTTP 400 не содержит заголовка Access-Control-Allow-Origin.

Pablo Costa 30.08.2024 15:32

Другие вопросы по теме