Cannot post data from React Js to Node js

Question

I am beginner use React Js and Node Js, I get a problem, I cannot post my data from React Js to Node Js, I have been looking for the way but failed all, I don't know why.

This is my complete code.

This is my react file 'member.js', run on port 3000 (http://localhost:3000/member).

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Member extends Component {
  constructor() {
    super();
    this.state = { player: {} };
  }

  handleSubmit(e) {
    e.preventDefault();
    fetch('http://localhost:4000/player', {
        mode: 'no-cors',
        method: 'post',
        headers: {
            "Content-Type": "text/plain"
        },
        body: JSON.stringify({
          number: 123,
          name: "John",
          position: "Andrew"
        })
    }).then(function(response) {
      console.log(response);
    }).catch(function(error) {
      console.log('Request failed', error)
    });    
  }

  render() {
    return (
      <div className="member-page">
        <form>
          <input type="submit" onClick={this.handleSubmit.bind(this)} />
        </form>
      </div>
    )
  }
}
export default Member;

and this is my node file 'player.js', run on port 4000 (http://localhost:4000/player).

var http = require('http');
var mysql = require('mysql');
var express = require('express');
var app = express(); 

var connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "react_1"
});

app.post('/player', function(req, res, next) {

    res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      next();

  var player = req.body;
  var query = connection.query('INSERT INTO player VALUES ?', player, function(err, result) {
    // Neat!
  });
  res.end('Success');
});

app.listen(4000, function() {
  console.log('Example app listening on port 4000!');
});

I don't know where I do a mistake, please anyone correct my code either member.js or player.js.

Thank you very much for all the help.

Correct me if I'm wrong, but I'm suspecting that the problem is that the server is only accepting when CORS is enabled, and in your client your request has no-cors enabled... I'm not an expert at this but I'm trying to help — noe
– noe, Commented Sep 20, 2017 at 8:14
Don't set text/plain as content type if you're sending JSON data, and make sure that your server is using body-parser to parse the posted data. — robertklep
– robertklep, Commented Sep 20, 2017 at 8:23

Rajat Dhoot · Accepted Answer · 2017-09-20 09:12:24Z

0

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

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(5000, () => {
  console.log('Example app listening on port 5000!')
})

app.use('/', router);

Try to Configure your node server like this

answered Sep 20, 2017 at 9:12

Rajat Dhoot

1854 silver badges17 bronze badges

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

1 Comment

John Andrew Over a year ago

I have tried your recommendation, but when I tried 'console.log(req.body)', in console show undefined, what's next. .?

Zahidul Islam · Accepted Answer · 2017-09-21 17:02:07Z

0

I agree with @robertklep. I think problem is in var player = req.body;

Try:

Install body-parser npm package

npm i -S body-parser

Configure body-parser

   var http = require('http');
   var mysql = require('mysql');
   var express = require('express');
   var bodyParser = require('body-parser');
   var app = express(); 

   app.use(bodyParser.json()); // for parsing application/json
   app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

   //enable CORS
   app.use(function(req, res, next) {
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
     next();
  });

  var connection = mysql.createConnection({
       host: "localhost",
       user: "root",
       password: "",
       database: "react_1"
  });

  app.post('/player', (req, res) => {
       var player = req.body;
       var query = connection.query('INSERT INTO player VALUES ?', player, (error, results, fields) => {
          if (error) throw error;
          // Neat!
       });
      res.send('Success');
    });

  app.listen(4000, function() {
     console.log('Example app listening on port 4000!');
   });

edited Sep 21, 2017 at 17:02

answered Sep 20, 2017 at 9:22

Zahidul Islam

1251 silver badge5 bronze badges

4 Comments

John Andrew Over a year ago

I have tried your recommendation, but when I tried 'console.log(req.body)', in console show undefined, what's next. .?

Zahidul Islam Over a year ago

@JohnAndrew I moved CORS related code outside the /player route and created a express middleware. Moreover, I changed res.end('Success') to res.send('Success') because res.send uses content-type:text/html as Content-Type. Let me know if it works.

John Andrew Over a year ago

Thank yo very much @Md Zahidul Islam

Zahidul Islam Over a year ago

@JohnAndrew I am happy that it help. Would you mind accepting it as answer.

henrywongkk · Accepted Answer · 2019-10-23 11:10:07Z

0

First install body-parser using :

npm install body-parser

const bodyParser = require('body-parser');

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

If you are passing string data then use

app.use(bodyParser.text());

Otherwise if you are passing data as Json then use

app.use(bodyParser.Json());

It should work in your case.

edited Oct 23, 2019 at 11:10

henrywongkk

1,9083 gold badges17 silver badges27 bronze badges

answered Oct 23, 2019 at 10:07

brijesh chavda

814 bronze badges

Collectives™ on Stack Overflow

Cannot post data from React Js to Node js

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related