-3

我之前使用 php web 表单创建了网站,但我正在尝试在 AWS 中使用 Lambda / API Gateway / 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>

有任何想法吗?

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

当我从 Lambda 测试时,不需要密钥或授权,并且设置有效(我收到了电子邮件)。API Gateway post 方法的测试也成功。但是,它在我的网站上不起作用,这让我相信这是我的 html/JavaScript 代码中的内容,我将很快对其进行审查/修改。

4

2 回答 2

2

创建阶段时,显示的链接不包含 URL 的资源部分:

在你的代码中

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

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

api + 您的资源名称:https ://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/ <resource_name>

因此,如果我是正确的,您在 api url 末尾缺少资源名称。

例如我有这个 api 网关部署

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

我从浏览器调用名为myaccounts的资源的实际 URL 如下所示:

api + 资源:请求 URL:https ://asdasdsadsa.execute-api.eu-central-1.amazonaws.com/v1/myaccounts

如果您的方法配置如下所示意味着它没有配置任何授权(我假设您没有按照您在此处描述的问题)

在此处输入图像描述

编辑

似乎来自您分享的错误消息

{“消息”:“无法将请求正文解析为 json:无法将有效负载解析为 json:无法识别的令牌“名称”:在 [来源:(字节[])"name=test&email=test%40yahoo.com&message=Your+Message"; 行:1,列:6]"}

您有 URL 编码数据,这些数据正在发送到API 网关上的application/json类型设置。

所以你需要在调用 api 端点时将你的 URL 编码数据转换为 json 格式

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

于 2021-01-04T07:17:46.707 回答
0

您需要禁用对端点的授权。如何打开对 AWS API Gateway 资源的匿名访问 或将您的终端节点的授权合并到您的脚本中。

于 2021-01-04T04:08:16.207 回答