Убедитесь, что значения заголовка ответа CORS действительны - при использовании apigateway и s3

http://frontend-erjan-vote.s3-website-us-east-1.amazonaws.com/ s3 со статическим сайтом имеет 2 кнопки, я отправляю запрос на публикацию при нажатии кнопки, он отправляется в обработку через URL-адрес серверной части шлюза API — https://5y7dfynd34.execute-api.us-east-1.amazonaws.com

если вы нажмете f12 на ссылке frontend-erjan выше и нажмете кнопку, она даст

A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request .
To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.
Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).
1 request
Request Status  Preflight Request (if problematic)  Header  Problem Invalid Value (if available)
 5y7dfynd34.execute-api.us-east-1.amazonaws.com/    blocked 
 5y7dfynd34.execute-api.us-east-1.amazonaws.com/    Access-Control-Allow-Headers    Invalid Value   
Learn more: Cross-Origin Resource Sharing (CORS)

в консоли шлюза API в разделе CORS я добавил в заголовки все, что мог придумать:

или картинка из браузера:

не могу понять в чем ошибка

Обновлено: добавление index.html, где функция вызывает backend_url шлюза API. У него нет маршрутов. Я добавил его раньше, но это не имело значения, поэтому я удалил его.

это мой файл s3 index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>A or B?</title>
    <base href = "/index.html">
    <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
    <link rel = "stylesheet" href = "style.css" />
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  </head>
  <body>
    <div id = "content-container">
      <div id = "content-container-center">
        <h3>A or B?</h3>
        <form id = "choice" name='form' method = "POST" action = "/">
          <button id = "a" type = "submit" name = "vote" class = "a" value = "a">A</button>
          <button id = "b" type = "submit" name = "vote" class = "b" value = "b">B</button>
        </form>
        <div id = "tip">
          (Подсказка: вы можете голосовать несколько раз)
        </div>
      </div>
    </div>
    <script src = "http://code.jquery.com/jquery-latest.min.js" type = "text/javascript"></script>
    <script src = "//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

    <script>
      var backend_url = "https://5y7dfynd34.execute-api.us-east-1.amazonaws.com/"

      $.ajaxSetup({
          headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
          }
      });

      $(document).on('click','button[name=vote]',function(){
        vote = this.value;
        $.post(backend_url, JSON.stringify({ "vote": vote }), function(result,status){
          console.info(result);
          if ("success" == status) {
            usedButton = $('button.' + vote);
            usedButton.prop('disabled', true);
            usedButton.html(vote + ' <i class = "fa fa-check-circle"></i>');
            usedButton.css('opacity','0.5');
            unusedButton = $('button.' + (vote == 'a' ? 'b' : 'a'));
            unusedButton.prop('disabled', false);
            unusedButton.html(vote == 'a' ? 'b' : 'a');
            unusedButton.css('opacity','1');
            setTimeout(function(){usedButton.prop('disabled', false); usedButton.html(vote);}, 2000);
          } else {
            alert("error! :(");
          }
        });
        return false;
      });
    </script>
  </body>
</html>
Стоит ли изучать 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
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вызов API фактически возвращает 404. Ваш FE вызывает URL-адрес https://5y7dfynd34.execute-api.us-east-1.amazonaws.com/ без каких-либо маршрутов. Это намеренно, что это пустой маршрут? URL-адрес при попытке от postman также возвращает 404, что означает, что пустой маршрут не настроен в шлюзе API. Конфигурация шлюза API будет правильно работать для http-статуса 200. Таким образом, вызов правильного маршрута в шлюзе API также должен устранить вашу ошибку CORS.

В стороне: в вашей конфигурации Access-Control-Allow-Origin вы можете настроить только доменные имена, /voting или / не нужны.

есть 2 маршрута, связанных с двумя лямбда-выражениями бэкэнда - /voting и /result, вы имеете в виду, что в моем s3 index.html у меня должен быть маршрут backend_url +, а не только сам backend_url? я обновил вопрос и добавил файл s3 static index.html

ERJAN 05.01.2023 06:25

теперь я прикрепил "/voting" к var backend_url в s3 index.html - и я получаю ошибку 500 POST....

ERJAN 05.01.2023 06:45

@ERJAN Вы получаете 500 из-за неправильных настроек интеграции. Если вы можете дать более подробную информацию о вашей настройке, я мог бы помочь вам.

user11666461 05.01.2023 06:53

прямо сейчас он также терпит неудачу со странным 404 «Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден)» - но нигде в файле s3 index.html нет favicon.ico!

ERJAN 05.01.2023 06:56

Вы можете спокойно игнорировать сбои favicon. Хотя рекомендуется добавить favicon в качестве лучшей практики. Ваш браузер пытается добавить фавикон, а вы его не настроили. Обратитесь к этому ТАК посту для более подробной информации. На данный момент вы можете игнорировать эту ошибку и сосредоточиться на 500, исходящих от API.

user11666461 05.01.2023 07:01

эта ошибка исчезла! Я загрузил myicon png и добавил код <head profile ...>. теперь только 500. консоль браузера указывает на строку 42 из index.html - "$.post(backend_url, JSON.stringify({"vote": voice}), function(result,status){"

ERJAN 05.01.2023 07:11

я думаю, что проблема связана с "<form id = "choice" name='form' method = "POST" action = "/">. "action" должно быть "/voting"? как он подключается и вызывает метод API если внутренний URL делает это?

ERJAN 05.01.2023 07:35

Не уверен, что ваш вопрос. В backend_url нет /voting. Чтобы протестировать свое приложение, вы можете добавить его в файл backend_url. Настоящая проблема заключалась в том, что API возвращал 500 даже при тестировании в Postman. Исправление, которое является решением вопроса в этом посте

user11666461 05.01.2023 08:14

я пытаюсь сделать почтовый запрос другим способом - используя метод fetch()

ERJAN 05.01.2023 08:15

спасибо, что сработало, так это изменить тип маршрута / голосования, чтобы принимать ЛЮБОЙ, а не только POST. я изменил его в шлюзе API

ERJAN 05.01.2023 08:26

@ERJAN POST должно было сработать. Изменение его на ANY не должно было иметь никакого значения. В любом случае, можете ли вы отметить это как ответ, если считаете, что мои предложения помогли вам найти ответ?

user11666461 05.01.2023 11:20

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