Axios发布参数未发送

Question

I'm using Axios in a react app to acess an api. I'm trying to post login details to the server however when I log the body of the request all I get is {} .

Heres the request:

handleSubmit() {
    let email    = this.state.email
    let password = this.state.password

    request.post("/login",{email: email, password: password}) //just prints {} on the backend
    .then((results)=>console.log(results))
    .catch((err)=>console.log(err))
}  

If I remove the braces and just sent a string like hello as a test I get back { hello: '' } so clearly its working. I've tried everything at this stage to get the user input in the field but have not been successful.

Heres the server code:

var app = express();
var bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({
    extended: true
}));
app.post("/login",(req,res) => {
    console.log(req.body);
})

My api is a node server on port 4000 using express.js

Answer 1

Update : The object has to be stringified as querystring. You can use qs package for that purpose. See the updated code.

Since you are using body-parser 's bodyParser.urlencoded middleware, request's content-type need to be set as 'x-www-form-urlencoded'.

import qs from "qs";

// ...

handleFormSubmit = event => {
    event.preventDefault();

    const requestBody = {
      email: this.state.email,
      password: this.state.password
    }

    const config = {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }

    request.post('/login', qs.stringify(requestBody), config)
    .then(res=>console.log(res))
    .catch(err=>console.log(err))
}