how does $.post send request from s3 index.html? is it get or post request-CodePudding

s3 static hosting index.html file has 2 buttons - A , B. Its a simple app for voting, after clicking on either button it sends thru api gateway a value "a" or "b" to lambda backend function; the lambda function puts the value into dynamo db table.

I dont get how "$.post(backend_url...)" works, does it send post or get request? My lambda is made to accept only get request. I specified this code below:

<!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">
          you can vote several times
        </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>
       #url to api gateway
      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;



        # ************* ********************
        #this line below  is tricky for me - does it generate POST or GET REQUEST to api gateway?

        $.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：

i managed to find and troubleshoot the 500 error. the problem was that the backend lambda was returning 500 status due to its own failed exception management.

basically, the backend lambda could not parse the msg sent from s3!

the post request from s3 already had 'body', the full structure of the post event request:

event = {'version': '2.0', 'routeKey': 'ANY /voting', 'rawPath': '/voting', 'rawQueryString': '', 'headers': {'accept': 'application/json', 'accept-encoding': 'gzip, deflate, br', 'accept-language': 'en-US,en;q=0.9', 'content-length': '123', 'content-type': 'text/plain', 'host': '5y7dfynd34.execute-api.us-east-1.amazonaws.com', 'origin': 'http://frontend-erjan-vote.s3-website-us-east-1.amazonaws.com', 'referer': 'http://frontend-erjan-vote.s3-website-us-east-1.amazonaws.com/', 'sec-ch-ua': '"Not?A_Brand";v="8", "Chromium";v="108", "Brave";v="108"', 'sec-ch-ua-mobile': '?0', 'sec-ch-ua-platform': '"Windows"', 'sec-fetch-dest': 'empty', 'sec-fetch-mode': 'cors', 'sec-fetch-site': 'cross-site', 'sec-gpc': '1',
                                                                                                                  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36', 'x-amzn-trace-id': 'Root=1-63ba8b86-3f15fd0a56aa19646ed508da', 'x-forwarded-for': '164.40.37.179', 'x-forwarded-port': '443', 'x-forwarded-proto': 'https'}, 'requestContext': {'accountId': '025416187662', 'apiId': '5y7dfynd34', 'domainName': '5y7dfynd34.execute-api.us-east-1.amazonaws.com', 'domainPrefix': '5y7dfynd34', 'http': {'method': 'POST', 'path': '/voting', 'protocol': 'HTTP/1.1', 'sourceIp': '164.40.37.179', 'userAgent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36'}, 'requestId': 'eaq8-gtAoAMEbkw=', 'routeKey': 'ANY /voting', 'stage': '$default', 'time': '08/Jan/2023:09:23:18  0000', 'timeEpoch': 1673169798075}, 'body': '{"body":{"MessageAttributes":{"vote":{"Type":"String","StringValue":"a"},"voter":{"Type":"String","StringValue":"count"}}}}', 'isBase64Encoded': False}

in backend lambda i tried to parse it without parsing inner 'body'.

the msg i tried to parse:

{
    "body": {
        "MessageAttributes": {
            "vote": {
                "Type": "String",
                "StringValue": "b"
            },
            "voter": {
                "Type": "String",
                "StringValue": "count"
            }
        }
    }
}

but it had additional 'body'!

"body":
{
    "body": {
        "MessageAttributes": {
            "vote": {
                "Type": "String",
                "StringValue": "b"
            },
            "voter": {
                "Type": "String",
                "StringValue": "count"
            }
        }
    }
}