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.

Answer 1

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!');
   });

Answer 2

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

Answer 3

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.