AWS API-шлюз недоступен с веб-страницы S3 - PullRequest
Новая
       6

AWS API-шлюз недоступен с веб-страницы S3

0 голосов
/ 14 марта 2020

Я пытаюсь добавить контакт формы на веб-страницу AWS S3 stati c с API Gateway, Lambda and SES

. Я проверил и следовал многим инструкциям, поэтому шлюз API и Lambda вместе могут отправлять Пишите правильно. Я даже успешно проверил приложение почтальона на моем домашнем компьютере.

Полагаю, скрипт формы веб-страницы не вызывается или создан неправильно, пожалуйста, помогите проверить его. Форма не получает ответ об ошибке, только сама себя сбрасывает.

Это AWS лямбда-функция 

var AWS = require('aws-sdk');
var ses = new AWS.SES();

var RECEIVER = 'xxxxx@gmail.com';
var SENDER = 'xxxxx@gmail.com';

var response = {
 "isBase64Encoded": false,
 "headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'},
 "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 + '\nphone: ' + event.phone + '\nemail: ' + event.email + '\ndesc: ' + event.desc,
                    Charset: 'UTF-8'
                }
            },
            Subject: {
                Data: 'Website Referral Form: ' + event.name,
                Charset: 'UTF-8'
            }
        },
        Source: SENDER
    };
    ses.sendEmail(params, done);
}

веб-страница формы, которую она называет AWS, имеет значение 

<html>
<head>
</head>
<body>
<form id="contact-form" method="post">
      <h4>Name:</h4>
      <input type="text" style="height:35px;" id="name-input" placeholder="Enter name here" class="form-control" style="width:100%;" /><br/>
      <h4>Phone:</h4>
      <input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number" class="form-control" style="width:100%;"/><br/>
      <h4>Email:</h4>
      <input type="email" style="height:35px;" id="email-input" placeholder="Enter email here..." class="form-control" style="width:100%;"/><br/>
      <h4>How can we help you?</h4>
      <textarea id="description-input" rows="3" placeholder="Enter your message..." class="form-control" style="width:100%;"></textarea><br/>
      <div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control" style="width:100%;"></div>
      <button type="button" onClick="submitToAPI(event)" class="btn btn-lg" style="margin-top:20px;">Submit</button>
</form>

</body>

<script>
function submitToAPI(e) {
       e.preventDefault();
       var URL = "https://"awsdata".amazonaws.com/probado/sndemail";


       var name = document.getElementById("name-input").value;
       var phone = document.getElementById("phone-input").value;
       var email = document.getElementById("email-input").value;
       var desc = document.getElementById("description-input").value;
       if (name=="" || phone=="" || email=="" || desc=="")
        {
            alert("Please Fill All Required Field");
            return false;
        }

        nameRE = /^[A-Z]{1}[a-z]{2,20}[ ]{1}[A-Z]{1}[a-z]{2,20}/;
        if(!nameRE.test(name)) {
            alert("Name entered, is not valid");
                return false;
        }

        phoneRE = /^([0|\+[0-9]{1,5})?([7-9][0-9]{9})$/;
        if(!phoneRE.test(phone)) {
                alert("Phone number entered, is not valid");
                return false;
            }

        emailRE = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if(!emailRE.test(email)) {
            alert("Email Address entered, is not valid");
                return false;
        }
       var data = {
          name : name,
          phone : phone,
          email : email,
          desc : desc
        };

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("POST", "<URL for API gateway>");
        xmlhttp.setRequestHeader("Content-Type", "application/json");
        xmlhttp.send(JSON.stringify(data));
        xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4) {
            var response = JSON.parse(xmlhttp.responseText);
            if (xmlhttp.status === 200 ) {
                console.log('successful');
                document.getElementById("contact-form").innerHTML = "<h1>Thank you for your message/feedback<br>our team will get back to you soon!</h1>";
            } else {
                console.log('failed');
            }
        }
    }

    document.getElementById('contact-form').reset();

    } 
</script>

</html>

API-шлюз CORS

enter image description here

...