POST 400 bad request when uploading file to S3 using Lambda and API Gateway using static website-CodePudding

I have been following the tutorial (https://www.youtube.com/watch?v=IDoEERbTQm4) in order to upload files using a static S3 file in conjunction with API gateway and Lambda. I have followed all the steps as illustrated in the tutorial, however, when writing to the file I keep getting 'POST 400 bad request'.

I have ensured to specify datatype as JSON and JSON.stringify the data but the error seems to still persist. The code snippets are below but the site can be viewed on https://transcriberbucket1.s3.amazonaws.com/index.html

/*
Function called when the GET Object Event Button is triggered.
Images will be loaded automaticaly at the bottom div, For files, it will just show a null image icon(which is an error, if you have time fix it)
*/

$(document).ready(function() {
    $("#UrlSignerBtnId").click(function() {
        $.ajax({
            url: 'https://ze451btvv2.execute-api.eu-west-2.amazonaws.com/prod',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                "BucketName": $('#BucketNameId').val(),
                "ObjectName": $('#ObjectNameId').val(),
                "methodType": $('#methodTypeId option:selected').attr('value'),
            }, ),
            dataType: "json",
            //beforeSend: function(){ $( '#loader' ).show();},
            success: function(res) {
                $("#urlTextId").html("Your <a href="   res.PreSignedUrl   ">Pre-Signed Url</a> expires in "   res.ExpiresIn  " Seconds");
                $("#SignedUrlId").html("<img src='"   res.PreSignedUrl   "'>");
                $("#div-obj-holderId").show();
            },
            error: function(e) {
                $("#urlTextId").html("Unable to Retrieve Image, Check Object Key name.");
                $("#SignedUrlId").html("<i>"  e.responseText   "</i>");
                $("#div-obj-holderId").show();
            },
            // complete: function() { $('#loader').hide(); }
        });
    });
});

/*
Function called when the Upload Object Event Button is triggered.
Gets the Pre-Signed Upload Url and Triggers the Upload Function
*/
$(document).ready(function() {
    $("#ObjectUploadBtnId").click(function() {
        $.ajax({
            url: 'https://ze451btvv2.execute-api.eu-west-2.amazonaws.com/prod',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                "BucketName": $('#BucketNameId').val(),
                "methodType": $('#methodTypeId option:selected').attr('value'),
                "FileName": $('#FileNameId').val()
            }, ),
            dataType: "json",
            //beforeSend: function(){ $( '#loader' ).show();},
            success: function(res) {
                uploadFile(res, res.url);
            },
            error: function(e) {
                $("#urlTextId").html("Failed: Unable to Get Signed Upload Url"   e.responseText);
                $("#SignedUrlId").html("");
                $("#div-obj-holderId").show();
            },
            complete: function() {
                $('#loader').hide();
            }
        });
    });
});

CodePudding user response：

Most of the time its the configuration that cause such problems.

Check aws-region used to create the lambda function and api-gateway are same or not.

Edit: You might need to change the aws-region:eu-cenral-1 to the region you deployed your lambda and api-gateway. I ran the same code from the tutorial and i get the same issue of POST 400 bad request

But after changing it from eu-central-1 to us-east-1(region where is created the lambda and api-gateway) it fixed and both the features(upload and download) works.

    s3 = boto3.client('s3', region_name = 'eu-central-1',config=Config(signature_version='s3v4'))

    s3 = boto3.client('s3', region_name = 'us-east-1',config=Config(signature_version='s3v4'))