Express JS is receiving an empty req.body from ReactJS

Question

I am currently having a problem with React and Express JS form submit function. It seems like my nodeJS running on port 5000 is receiving an empty object from my ReactJS running on port 8080 using fetch method.

React : Contact.js

handleSubmit(e)
{    
    e.preventDefault();
    var data = {
      name: this.state.name,
      contact: this.state.contact,
      email: this.state.email,
      message: this.state.message,
    }

    var url = 'http://localhost:5000/api/insertUsers';

    fetch(url, {
      method: 'POST',
      headers: {
     'Content-Type': 'application/json'
    },
      mode: 'no-cors',
      body: JSON.stringify(data),
    })
    .catch((error) => {
      console.log(error);
    });
}

NodeJS : server.js

const express     = require('express');
const { Client }  = require('pg');
const bodyParser  = require('body-parser');
const app         = express();

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

app.post('/api/insertUsers', function(req, res) {
    res.setHeader('Content-Type', 'text/plain')
    res.write('you posted:\n') 
    res.end(JSON.stringify(req.body, null, 2))
}); 

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

Answer 1

Hello I ended up getting mine working after I ran into the same problem.

I noticed your react code has "mode: 'no-cors'," that was causing problems with mine so I removed it.

-------- Below is my handle submit code for React ------------

const handleSubmit = (event) => {
    event.preventDefault();
    const url = "http://localhost:3001/register"
    const options = {
        method: "POST",
        body: JSON.stringify(formData),
        headers: {
            "Content-Type": "application/json"
        }
    }

    fetch(url, options)
        .then(res => res.json())
        .then(res => console.log(res))
}

I used express.json instead of bodyParser. You also had a typo in your express code, it should say res.send instead of res.end

--------- Below is my Node Express Code -----------

const express = require('express');
const app = express();

const cors = require('cors');
const multer = require('multer');

// Middlewares
app.use(cors({ origin: 'http://localhost:3000', }))
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(multer().array()); 

app.post('/register',(req, res) => {
    console.log(req.body)
    res.status(200)
        .json({status:"Success", data:{body: req.body })
}); 

app.listen(3001, () => console.log(`Running on 3001`))

I was able to send form data using postman and react using the code above. Feel free to change it to accommodate your needs.

Answer 2

I am ashamed that I struggled with this for hours. I still haven't gotten it to work with file uploads.

But I did get it to work with a normal form by encoding JSON and sending that along with axios, instead of fetch

My js code

    var data = {
      id: this.state.id,
    }

    console.log('data',data)
    var bodyFormData = new FormData();

    bodyFormData.set('id', this.state.id);
 
    var url = ' http://localhost:3000/get-image-by-id';

console.log("bodyFormData: ", bodyFormData);
    axios({
      method: 'post',
      url: url,
      data: data,
      // headers: {'Content-Type': 'multipart/form-data' }
      headers: {'Content-Type': 'application/x-www-form-urlencoded' }


    })
      .then(function (response) {
        //handle success
        console.log(response);
      })
      .catch(function (response) {
        //handle error
        console.log(response);
      });

Form Code

      <form method="POST" onSubmit={this.handleSubmit} >
        <label>
          Transaction ID
          <input
            type="text"
            name="id"
            value={this.state.id}
            onChange={this.handleInputChange}
          />
        </label>

        <button type="submit">Submit</button>
      </form>
    ```

Answer 3

try using axios instead of fetch I rewrote ur code like this and it works perfectly

server

const express     = require('express');
const { Client }  = require('pg');
const bodyParser  = require('body-parser');
const app         = express();
const cors = require("cors");

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

app.post('/api/insertUsers', function(req, res) {
// console.log(req);
console.log(req.body);
res.send(req.body);
}); 

app.listen(3001, () => {
 console.log('listening on port 3001');
});

react (ensure you have axios installed)

handleSubmit(e){
e.preventDefault(); var data = { name: "zadiki", contact: "0702002109", email: "zadiki", message: "test", } console.log("wow"); var url = ' http://localhost:3001/api/insertUsers'; axios.post(url,data) .then(response=>console.log(response)) .catch(e=>console.log(e)) }

Answer 4

EDIT

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  mode: 'no-cors'
}).then((result)=>{
   console.log("output" + result.json());
})
.catch((error) => {
  console.log(error);
});

EDIT 2

for backend, install cors and add the following lines before route.

var cors = require('cors')

app.use(cors())

EDIT 3 perform npm install morgan then copy these lines inside the code

var morgan = require('morgan');

app.use(morgan('dev'));

Answer 5

I didn't look at your code close enough. My bad

app.post('/api/insertUsers', function(req, res) {
    res.setHeader('Content-Type', 'text/plain')
    res.write('you posted:\n') 
    res.end(JSON.stringify(req.body, null, 2))
}); 

Should be

app.post('/api/insertUsers', function(req, res) {
    res.json(req.body)
}); 

Answer 6

You are sending a request with the content-type of 'application/json' but express is expecting a content-type of 'text/json'. Usually, when req.body is empty content-type is the first suspect you should be looking at.

Answer 7

Change the order of bodyparser middleware like this.

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