Express JS is receiving an empty req.body from ReactJS

问题

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

回答1:

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

回答2:

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.

回答3:

Change the order of bodyparser middleware like this.

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

回答4:

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

回答5:

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)) }

回答6:

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>
    ```

来源：https://stackoverflow.com/questions/52847159/express-js-is-receiving-an-empty-req-body-from-reactjs