Pass Data from React to node express server

Question

I am trying to pass the generalDetail data from my react front end to my node server. I am currently getting a connection refused error.

(OPTIONS http://localhost:5000/api/home net::ERR_CONNECTION_REFUSED).

here is my onSubmitForm function:

  onSubmitForm(e){
  e.preventDefault();

  let data = {
            generalDetail: this.state.generalDetails,
            firstName: this.state.firstName,
            middleName: this.state.middleName,
            lastName: this.state.lastName
      };

      axios.post("http://localhost:5000/home", data).then(() => {

       }).catch(() => {
          console.log("Something went wrong. Plase try again later");
      });


}
  //end

  onContentChange(fieldname, data){

    console.log('On Content Change', data);

     this.setState({
       [fieldname]: data

    });
  }



}

Here is my server.js file

const express = require('express');

const app = express();


// http://localhost:5000/api/home

app.post('/api/home', (req, res) => {
  const data = [
    {req.body.generalDetail},
  ];

  res.json(data);
});

const port = 5000;

app.listen(port, () => `Server running on port ${port}`);

you are declaring your api route as '/api/home' but sending the data to '/home'. You need to make sure you are sending data to the correct route. — Jake
– Jake, Commented May 14, 2019 at 2:37
if you change your .catch to handle the error you will see that you are getting a 404. try using: .catch( (error) => { console.log(error); )); — Jake
– Jake, Commented May 14, 2019 at 2:39

Tony · Accepted Answer · 2019-05-14 04:03:52Z

1

You can change your code into this

Example

onSubmitForm = e => {
        e.preventDefault();
        let data = {
              generalDetail: this.state.generalDetails,
              firstName: this.state.firstName,
              middleName: this.state.middleName,
              lastName: this.state.lastName
        };

        axios.post("http://localhost:5000/api/home", data).then(() => {
           //do something
         }).catch(() => {
            console.log("Something went wrong. Plase try again later");
        });
    }

answered May 14, 2019 at 4:03

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ctg · Accepted Answer · 2019-05-14 04:40:08Z

1

try this

const express = require('express')
const app = express()
const port = 8000 //your port number

const cors = require('cors')
app.use(cors())
var bodyParser = require('body-parser')
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));

edited May 14, 2019 at 4:40

answered May 14, 2019 at 2:12

ctg

1075 bronze badges

8 Comments

ctg Over a year ago

so did you see "Server running on port ${port}" in you console

Tom Hunt Over a year ago

No I didn't actually haha

Tom Hunt Over a year ago

No it isn't unfortunately

ctg Over a year ago

did u start the server. "node server.js" file . Did u get any errors?

Tom Hunt Over a year ago

its saying invalid syntax for {req.body.generalDetail}, Would you happen to know the correct syntax? I'm trying to pass the data through from react to the backend.

|

Ram · Accepted Answer · 2019-05-14 12:47:09Z

0

Try to add cors preflight code in your backend code (server.js).

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  res.header("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS");
  res.header("Access-Control-Allow-Credentials", true);
  next();
});
app.post('/api/home', (req, res) => {
  const data = [{ generalDetails: req.body.generalDetail }];
  res.json(data);
});

answered May 14, 2019 at 12:47

Ram

1031 silver badge9 bronze badges

Collectives™ on Stack Overflow

Pass Data from React to node express server

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related