I apologize if any terminology or logic is nonsensical, I've been thrown into the fire with this issue and I'm still new. My employer's previous web developer had implemented a contact form on a static website that utilizes AWS and Amazon SES to forward emails. I have absolutely no idea how this works on the Amazon backend side of things and I'm the only tech-related person in the office, so this is all on me. I have no superior to go to for help. The AWS account this is attached to is not in my employer's possession - it's his previous employee's personal account, so I don't have access to it at all. I must re-do this myself.

From what I've figured out, the submission form sends the data to an AWS API, and then something is triggered that invokes the Lambda function which then lets SES send an email to my employer with customer info.

I've googled AWS+Amazon SES mail forwarding and came across this tutorial: https://www.freecodecamp.org/news/how-to-receive-emails-via-your-sites-contact-us-form-with-aws-ses-lambda-api-gateway/

This is exactly what is being used and what I need to implement, but I'm having an issue.

Going through the tutorial, I've set up:

  • SES (verified my email address)
  • IAM Policy
  • IAM Role, attached to the lambda and linked to the permissions policy
  • Created the Lambda function and tested it (it sends me the emails successfully from the Lambda function dashboard)
  • API Gateway

The Lambda function works, as does SES. If it didn't, I wouldn't receive the test email. I followed the next part of the tutorial that asked me to use this code:

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
    // prevent the form submit from refreshing the page
    event.preventDefault();

    const { name, email, message } = event.target;

    // Use your API endpoint URL you copied from the previous step
    const endpoint =
        "<https://XXXXXXXXXX.execute-api.us-east-2.amazonaws.com/default/sendContactEmail>";
    // We use JSON.stringify here so the data can be sent as a string via HTTP
    const body = JSON.stringify({
        senderName: name.value,
        senderEmail: email.value,
        message: message.value
    });
    const requestOptions = {
        method: "POST",
        body
    };

    fetch(endpoint, requestOptions)
        .then((response) => {
            if (!response.ok) throw new Error("Error in fetch");
            return response.json();
        })
        .then((response) => {
            document.getElementById("result-text").innerText =
                "Email sent successfully!";
        })
        .catch((error) => {
            document.getElementById("result-text").innerText =
                "An unkown error occured.";
        });
});

Obviously I copy/paste my API gateway instead of XXXXXXXXX.

I've tested this in two environments, my local machine with Visual Studio Code live server and the website. When I submit the form on either, I receive two separate errors.

Local VSC error: 405 - Method Not Allowed

Website error: 404 - Not Found

I'm not sure where the issue lies but if I had to take an educated guess, It has to do something with the API. I'm not sure why the errors are different, I uploaded the exact same file to the web server. I'm stumped. The emails aren't coming through and to make matters worse, I'm receiving a "An unknown error occured" message.

Any help would be appreciated.

EDIT: I figured out what the issue was. The tutorial I followed has the API endpoint surrounded by < and > (you can see above.) Those aren't supposed to be there. Like I mentioned this is new to me so I replaced the example key with my own. I knew something was wrong with the URL...

0

There are 0 best solutions below