关于 API 网关 URL 错误（SES、API 网关、Lambda 与 javascript/html 的集成）有什么想法吗？

Question

我以前用 php 网络表单创建过网站，但我现在开始尝试在 AWS 中使用 Lambda / API 网关 / SES 组合，同时从 S3 启动网站, 以创建动态提交表单。如果您想快速查看提交表单（和错误），请在此处：https://precious-gemstones.com/about.html

这是我的 javascript，我已将其存储在我的 S3 存储桶的根级别：

function submitToAPI(e) {
       e.preventDefault();
       var URL = "https://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/email";

            var Namere = /[A-Za-z]{1}[A-Za-z]/;
            if (!Namere.test($("#name-input").val())) {
                         alert ("Name must be at least 2 characters.");
                return;
            }

            if ($("#email-input").val()=="") {
                alert ("Please enter your email.");
                return;
            }

            var reemail = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
            if (!reemail.test($("#email-input").val())) {
                alert ("Please enter a valid email address.");
                return;
            }

       var name = $("#name-input").val();
       var email = $("#email-input").val();
       var message = $("#message-input").val();
       var data = {
          name : name,
          email : email,
          message : message
        };

       $.ajax({
         type: "POST",
         url : "https://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/email",
         dataType: "json",
         crossDomain: "true",
         contentType: "application/json; charset=utf-8",
         data: JSON.stringify(data),

         
         success: function () {
           // clear form and show a success message
           alert("Thank you for your inquiry!");
           document.getElementById("contact-form").reset();
       location.reload();
         },
         error: function () {
           // show an error message
           alert("Error; please try again.");
         }});
     }

这是我的 Lambda 函数：

var AWS = require('aws-sdk');
var ses = new AWS.SES();
 
var RECEIVER = 'inquiry@precious-gemstones.com';
var SENDER = 'no-reply@precious-gemstones.com';

var response = {
 "isBase64Encoded": false,
 "headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'precious-gemstones.com'},
 "statusCode": 200,
 "body": "{\"result\": \"Success.\"}"
 };

exports.handler = function (event, context) {
    console.log('Received event:', event);
    sendEmail(event, function (err, data) {
        context.done(err, null);
    });
};
 
function sendEmail (event, done) {
    var params = {
        Destination: {
            ToAddresses: [
                RECEIVER
            ]
        },
        Message: {
            Body: {
                Text: {
                    Data: 'name: ' + event.name + '\nemail: ' + event.email + '\nmessage: ' + event.message,
                    Charset: 'UTF-8'
                }
            },
            Subject: {
                Data: 'Gemstone inquiry: ' + event.name,
                Charset: 'UTF-8'
            }
        },
        Source: SENDER
    };
    ses.sendEmail(params, done);
}

这是我的 html 代码片段：

                        <div class="contact-form">
                            <form id="contact-form" method="post" action="https://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/email">
                                <input name="name" type="text" class="form-control" placeholder="Your Name" required>
                                <br />
                                <input name="email" type="email" class="form-control" placeholder="Your Email" required>
                                <br />
                                <textarea name="message" class="form-control" required rows="10">Your Message</textarea>
                                <br />
                                <input type="submit" class="form-control submit" value="Send inquiry">
                            </form>
            </div>
            </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="submitToAPI.js"></script>
</body>

有什么想法吗？

我的 API 从我的 Lambda 触发器中看到的网关信息如下： API 端点：https://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/email API 类型：REST 授权：NONE 方法：POST 资源路径：/email 阶段：电子邮件

不需要密钥或授权，当我从 Lambda 进行测试时，设置有效（我收到了电子邮件）。从API网关post方法测试也成功。但是，它在我的网站上不起作用，这让我相信这是我的 html/JavaScript 代码中的某些东西，我很快就会 review/revise。

Answer 1

您需要禁用对您端点的授权。或者将对端点的授权合并到脚本中。

Answer 2

创建舞台时，显示的link不包含URL的资源部分：

在你的代码中

aws api gateway URL : https://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email

您实际应该调用的代码 url 必须是

api + your resource name : https://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/<resource_name>

因此，如果我是正确的，您在 api url.

末尾缺少资源名称

例如我有这个 api 网关部署

api url : https://asdasdsadsa.execute-api.eu-central-1.amazonaws.com/v1

actual URL 我从浏览器调用我的名为 myaccounts 的资源如下所示：

api + resource : Request URL: https://asdasdsadsa.execute-api.eu-central-1.amazonaws.com/v1/myaccounts

如果您的方法配置如下所示，则表示它没有配置任何授权（我假设您没有按照您在此处描述的问题进行配置）

编辑

从您分享的错误信息看来

{"message": "Could not parse request body into json: Could not parse payload into json: Unrecognized token 'name': was expecting 'null', 'true', 'false' or NaN\n at [Source: (byte[])"name=test&email=test%40yahoo.com&message=Your+Message"; line: 1, column: 6]"}

您有 URL 编码数据发送到 application/json 类型设置 API 网关。

因此您需要在调用 api 端点时将 URL 编码数据转换为 json 格式

相应的开发者表单线程：HOWTO: Mapping Template v3.0 to convert form POST data or GET query to JSON

关于 API 网关 URL 错误（SES、API 网关、Lambda 与 javascript/html 的集成）有什么想法吗？

Any ideas on API gateway URL error (SES, API Gateway, Lambda integration with javascript/html)?

javascript

amazon-web-services

amazon-ses

aws-lambda

amazon-api-gateway