Problem with POST request from React.js component to Node.js server

Question

I'm trying to send data from client's inputs based on React.js to server written in Node.js which put it to DB. I have no errors and after submit, new records show in database but they are empty. I have two inputs and I'm joining them in one string and trying send it to DB (so DB has one property). Can you check my code and see what is wrong? Maybe something with headers...

This is function in React component:

  addCompetitor = event => {
    event.preventDefault();
    const name = this.state.draftCompetitorName;
    const lastname = this.state.draftCompetitorLastname;
    fetch(`http://localhost:5000/competitors`, {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: `${name}${lastname}` })
    })
      .then(response => response.json())
   };

This is server POST response:

  app.post("/competitors/", urlencodedParser, function (req, res) {
    const newCompetitor = new Competitor({ name: req.body.name });
    newCompetitor.save().then(competitor => res.json(competitor));
  });

And it's app configuration:

app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type",
    "X-Requested-With"
  );
  res.setHeader("Access-Control-Allow-Credentials", true);
  next();
});

You should then first debug your backend code, add some debug info with console.log (dumping the captured body data) or put a breakpoint and inspect the request. Something like : console.log(JSON.stringify(req.body)) before the new Competitor.. — Goran.it
– Goran.it, Commented Dec 20, 2018 at 10:10
I think the error is with bodyparser. Have you added the middleware in the express or configured it correctly. try logging the request data with console.log(req.body) on the route — Rubin bhandari
– Rubin bhandari, Commented Dec 20, 2018 at 10:19

Navoneel Talukdar · Accepted Answer · 2018-12-20 10:48:35Z

2

If not first install bodyparser. This parses incoming request bodies in a middleware before your handlers, which will be available under the req.body property.

app.use(bodyParser.json({
  limit: '50mb',
  parameterLimit: 100000
}))

Alternatively what is the express version you are using ? Is it greater than 4.16? Then you can also use

app.use(express.json());

See notes here

https://expressjs.com/en/api.html#express.json

Modify your code

let databody = {
        "name": `${name}${lastname}`,
        "otherprop": this.state.otherprop
}

From frontend use body: JSON.stringify(databody),

In express end remove urlencodedParser , should be like below:

app.post("/competitors", function (req, res) {
    console.log(req.body);
});

answered Dec 20, 2018 at 10:48

Navoneel Talukdar

4,6365 gold badges23 silver badges43 bronze badges

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

3 Comments

Tomasz Paczka Over a year ago

I did everything. But still the same. console.log(req.body) shows: [object Object]

Tomasz Paczka Over a year ago

Sorry, it works! I just had to change back 'Content-Type' to 'application/json' because I changed it because of another answer. Thank you very much!

Kabbany Over a year ago

@TomaszPaczka you have to sync both request headers with what your controller is expecting. Either 'json' or 'x-www-form-urlencoded' as 'Content-Type' will work fine if the headers and format of body are correct

Kabbany · Accepted Answer · 2018-12-20 11:04:19Z

1

You are using urlencodedParser as a middleware so I guess you used bodyParser.urlencoded({}) but your request is sending a json format. Try adjusting your request by adding the following header:

'Content-Type': 'application/x-www-form-urlencoded'

EDIT:

Also body should be in the following format:

body: `name=${name}${lastname}`

edited Dec 20, 2018 at 11:04

answered Dec 20, 2018 at 10:42

Kabbany

5152 silver badges7 bronze badges

5 Comments

Tomasz Paczka Over a year ago

Still the same. And with this header when I console.log(req.body) in server route, it showed errors: POST localhost:5000/competitors 500 (Internal Server Error) and Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Tomasz Paczka Over a year ago

I don't understand, what is also=another?

Kabbany Over a year ago

that was just to indicate that you can pass more than one parameter in the same string. I edited the answer to match your request

Kabbany Over a year ago

It depends on which Content Type you are willing to use :)

Tomasz Paczka Over a year ago

Yes, I was trying to check all options which you guys telling me and I mixed it a little bit up so it didn't work. I know that your option could work too, it just that works better for me.

Collectives™ on Stack Overflow

Problem with POST request from React.js component to Node.js server

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related