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

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

#1

Hi FCC,

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">
            <div>
              <label style={styles.labelStyle}>Email:</label>
              <input ref="email" style={styles.inputStyle} type="text" required="true"/>
            </div>
            <div>
              <label style={styles.labelStyle}>Password:</label>
              <input ref="password" style={styles.inputStyle} type="password" required="true"/>
            </div>
            <div>
              <label style={styles.labelStyle}>Confirm:</label>
              <input ref="confirmPassword" style={styles.inputStyle} type="password" required="true"/>
            </div>
            <div>
              <input id="signup-submit" type="submit" value="Register"/>
            </div>
          </form>
        </div>
      </div>

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

handleSubmit(e){
    e.preventDefault();
    let reqBody = {
      email: this.refs.email.value,
      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) => {
        console.log(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 }));

app.post('/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.


#2

Are you using body-parser?


#3

Hi @PortableStick

yes, I am using body-parser.


#4

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

#5

Worked like a charm. Thanks very much!


#6

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