javascript - Error: Request failed with status code 404, React, Axios - Stack Overflow

admin管理员组

文章数量:1025457

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

Share Improve this question Follow edited Jan 8, 2022 at 12:02 random1234 asked Jan 7, 2022 at 17:18 random1234random1234 82744 gold badges1818 silver badges4343 bronze badges 9

• 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

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 5 +50

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

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

Share Improve this question Follow edited Jan 8, 2022 at 12:02 random1234 asked Jan 7, 2022 at 17:18 random1234random1234 82744 gold badges1818 silver badges4343 bronze badges 9

• 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

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 5 +50

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

本文标签： javascriptError Request failed with status code 404ReactAxiosStack Overflow