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.