ensure CORS response header values are valid - when using apigateway and s3-CodePudding

or the picture from browser:

i cant see what the error is

EDIT: adding index.html where function calls the api gateway backend_url. It has no routes. I did add it before, but it did not make difference so i removed it.

this is my s3 index.html file:

<!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"  value="a">A</button>
          <button id="b" type="submit" name="vote"  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.log(result);
          if ("success" == status) {
            usedButton = $('button.'   vote);
            usedButton.prop('disabled', true);
            usedButton.html(vote   ' <i ></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>

CodePudding user response：

The API call is actually returning 404. Your FE is calling the url https://5y7dfynd34.execute-api.us-east-1.amazonaws.com/ without any routes. Is it intentional that it is an empty route? The URL when attempted from postman also returns a 404 which means that an empty route is not configured in the API gateway. API gateway configuration will correctly work for http status 200. So calling the right route in API gateway should resolve your CORS error also.

Aside: In your Access-Control-Allow-Origin configuration, you can configure only the Domain Names, /voting or / is not needed.