I have built a form which I want to be able to send emails, to do this I have attempted to follow this youtube tutorial:

However I am running into an issue where I am getting the error in the question title which is ing up in my console web browser when trying to submit the form. I realize the issue might have something to do with one of the routes somewhere but I just cant figure it out (unless it's something pletely different).

schoolForm.js

const handleSubmit = async(e) => {
e.preventDefault();
try { //I also tried using only: "/send_mail" here like I have in server.js but it didnt work
  await axios.post("http://localhost:3000/send_mail", {
    name
  });
}
catch (error) {
  console.log(error);
  }
}

server.js

const express = require("express");
const app = express();
require("dotenv").config();
const bodyParser = require("body-parser");
const cors = require("cors");
const nodemailer = require("nodemailer");

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.use(cors());

app.post("/send_mail", cors(), async (req, res) => {
  let {text} = req.body;
  const transport = nodemailer.createTransport({
    host: "smtp-mail.outlook",
    port: 587,
    auth: {
      user: "[email protected]",
      pass: "password"
    },
    tls: {
      rejectUnauthorized: false
    }
  });

 await transport.sendMail({
    from: "[email protected]",
    to: "[email protected]",
    subject: "subject",
    html: `<p>${text}</p>`
  })

});

app.listen(4000, () => {
  console.log("Server is listening on port 4000");
});

Edit: The error I get in the browser:

Is there anyone that can help me solve this issue? Help would be greatly appreciated!

I have built a form which I want to be able to send emails, to do this I have attempted to follow this youtube tutorial: https://www.youtube./watch?v=_3-By9QfFa0

However I am running into an issue where I am getting the error in the question title which is ing up in my console web browser when trying to submit the form. I realize the issue might have something to do with one of the routes somewhere but I just cant figure it out (unless it's something pletely different).

schoolForm.js

const handleSubmit = async(e) => {
e.preventDefault();
try { //I also tried using only: "/send_mail" here like I have in server.js but it didnt work
  await axios.post("http://localhost:3000/send_mail", {
    name
  });
}
catch (error) {
  console.log(error);
  }
}

server.js

const express = require("express");
const app = express();
require("dotenv").config();
const bodyParser = require("body-parser");
const cors = require("cors");
const nodemailer = require("nodemailer");

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.use(cors());

app.post("/send_mail", cors(), async (req, res) => {
  let {text} = req.body;
  const transport = nodemailer.createTransport({
    host: "smtp-mail.outlook.",
    port: 587,
    auth: {
      user: "[email protected]",
      pass: "password"
    },
    tls: {
      rejectUnauthorized: false
    }
  });

 await transport.sendMail({
    from: "[email protected]",
    to: "[email protected]",
    subject: "subject",
    html: `<p>${text}</p>`
  })

});

app.listen(4000, () => {
  console.log("Server is listening on port 4000");
});

Edit: The error I get in the browser:

Is there anyone that can help me solve this issue? Help would be greatly appreciated!

• javascript
• node.js
• reactjs
• axios
• nodemailer

• your react app is runing in wich port ? – Omar Berrami Commented Jan 7, 2022 at 17:22
• What is an error message? – jmk Commented Jan 7, 2022 at 17:23
• @OmarBerrami localhost:3000 – random1234 Commented Jan 7, 2022 at 17:25
• @jkaczmarkiewicz I don't know what your question is? The error message I am getting, is the one in the title: Error: Request failed with status code 404 – random1234 Commented Jan 7, 2022 at 17:26
• @random1234 your problem is that your node app is runing on port 3000 and also your react app is runing on port 3000 so change one of theme – Omar Berrami Commented Jan 7, 2022 at 21:05

2 Answers 2

Your server is listening on port 4000. // server.js

app.listen(4000, () => {
  console.log("Server is listening on port 4000");
});

You should use below URL for Axios call. // schoolForm.js

await axios.post("http://localhost:4000/send_mail", {    // use port 4000 not 3000
    name
});

You've set up your server to listen to port 4000 but your axios request is to port 3000. Make sure you send the request to the correct port:

await axios.post("http://localhost:4000/send_mail", {
    name
  });

Also note the body-parser is deprecated and you should use express built-in middleware. so instead of:

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

you should have:

app.use(express.urlencoded({extended: true}));
app.use(express.json());

and you can remove body-parser dependency.

You can read here to learn more about express built-in middleware and their optional properties.

EDIT:

The reason it wasn't working is because body is an object created by the middleware itself. Therefore req.body is undefined since the body object doesn't exists