POST 使用 Lambda 和 API 使用静态网站的网关将文件上传到 S3 时出现 400 错误请求

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

我一直在学习教程 (https://www.youtube.com/watch?v=IDoEERbTQm4),以便结合 API 网关和 Lambda 使用静态 S3 文件上传文件。我已按照教程中说明的所有步骤进行操作,但是,在写入文件时,我不断收到 'POST 400 bad request'.

我已确保将数据类型指定为 JSON 和 JSON.stringify 数据,但错误似乎仍然存在。代码片段如下,但可以在 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();
            }
        });
    });
});

 

大多数时候是配置导致了此类问题。

检查 aws-region 用于创建 lambda 函数和 api-gateway 是否相同。

编辑: 您可能需要将 aws-region:eu-cenral-1 更改为部署 lambda 和 api-网关的区域。 我 运行 来自教程的相同代码,我得到了 POST 400 bad request

的相同问题

但在将其从 eu-central-1 更改为 us-east-1(创建 lambda 和 api-网关的区域)后,它已修复并且两个功能(上传和下载)都有效。

    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'))