Axios 发布参数未发送

Question

我在 React 应用程序中使用 Axios 来访问 api。我正在尝试将登录详细信息发布到服务器，但是当我记录请求正文时，我得到的只是{}。

这是请求：

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

如果我删除大括号并发送一个类似hello 的字符串作为测试，我会返回{ hello: '' }，很明显它的工作原理。在这个阶段，我已经尝试了所有方法来获取用户在该字段中的输入，但没有成功。

这是服务器代码：

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

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

我的 api 是使用 express.js 在端口 4000 上的节点服务器

Answer 1

更新：对象必须被字符串化为查询字符串。您可以为此目的使用qs package。查看更新的代码。

由于你使用的是body-parser的bodyParser.urlencoded中间件，所以request的content-type需要设置为'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))
}