Javascript's Fetch API - posting data to server body req.body is always empty?


I’m slowly making my way through the voting app backend challenge. I wanted to use react instead of a pug/ejs/etc so my setup may be a little atypical.

Basically my react app runs on localhost:3000 and my express server (to handle DB stuff) runs at localhost:3001. Right now im working on registering users. I have a form on my registration page that gathers the email and password of the user. It looks like this:

      <div className="signup-container">
        <div className="signup-box">
          <h1 style={styles.headerStyle}>Signup</h1>
          <form onSubmit={this.handleSubmit} style={styles.fontStyle} className="signup-form">
              <label style={styles.labelStyle}>Email:</label>
              <input ref="email" style={styles.inputStyle} type="text" required="true"/>
              <label style={styles.labelStyle}>Password:</label>
              <input ref="password" style={styles.inputStyle} type="password" required="true"/>
              <label style={styles.labelStyle}>Confirm:</label>
              <input ref="confirmPassword" style={styles.inputStyle} type="password" required="true"/>
              <input id="signup-submit" type="submit" value="Register"/>

when the form is submitted handle submit is called, which is where I post to my express server using Fetch:

    let reqBody = {
      password: this.refs.password.value,
      confirmPassword: this.refs.confirmPassword.value

    fetch("/signup", {
      method: "POST",
      body: JSON.stringify(reqBody)
      .then((res) => {
        if (res.ok){
          return res.json();
        } else {
          throw new Error ('Something went wrong with your fetch');
      }).then((json) => {

Because the react app is hosted at localhost:3000 and the express server is at localhost:3001 I set up a proxy in order to avoid violating the same origin policy. I have confirmed that my express app is registering this ajax call. My express route looks like this:

app.use(bodyParser.urlencoded({ extended: true }));'/signup', (req, res) => {
  console.log('you posted to /signup'); //appears in console as expected
  console.log(req.body); // {} -- always empty? cant figre out why
  console.log(typeof req.body); //"object"
  console.log(req.method); // "POST"
  res.json({greeting: "hello"}); //this is sent back to the browser and i can access it

What I cannot figure out is how I can access the request body server side? I need to be able to access the username and password so I can register a new user in my database. Has anyone had problems with this before? Any guidance would be helpful, I’ve looked at some fetch examples of posting and I think I’m following everything correctly so I am a bit stumped. Could this have something to do with the proxy?

Thank you kindly.

1 Like

Are you using body-parser?

Hi @PortableStick

yes, I am using body-parser.

I had the same problem and found out that I was missing the headers. After the body property, you need to add:

headers: {
                "Content-Type": "application/json"

Worked like a charm. Thanks very much!

A post was split to a new topic: Question on req.body with react

I had been switching from Postman ,VS Code and Browser.Thanks man