从React.js组件到Node.js服务器的POST请求问题

Question

我正在尝试将基于React.js的客户端输入中的数据发送到用Node.js编写的服务器中，该服务器将其放入数据库中。 我没有错误，提交后，新记录显示在数据库中，但它们为空。 我有两个输入，我将它们连接成一个字符串，然后尝试将其发送给DB（因此DB具有一个属性）。 您可以检查我的代码，看看有什么问题吗？ 也许有标题的东西...

这是React组件中的功能：

  addCompetitor = event => {
    event.preventDefault();
    const name = this.state.draftCompetitorName;
    const lastname = this.state.draftCompetitorLastname;
    fetch(`http://localhost:5000/competitors`, {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: `${name}${lastname}` })
    })
      .then(response => response.json())
   };

这是服务器POST响应：

  app.post("/competitors/", urlencodedParser, function (req, res) {
    const newCompetitor = new Competitor({ name: req.body.name });
    newCompetitor.save().then(competitor => res.json(competitor));
  });

它是应用程序配置：

app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type",
    "X-Requested-With"
  );
  res.setHeader("Access-Control-Allow-Credentials", true);
  next();
});

Answer 1

如果不是，请先安装bodyparser 。 这会在处理程序之前解析中间件中的传入请求主体，该req.body将在req.body属性下可用。

app.use(bodyParser.json({
  limit: '50mb',
  parameterLimit: 100000
}))

另外，您使用的是什么快递版本？ 大于4.16吗？ 那你也可以用

app.use(express.json()); 

在这里查看注释

https://expressjs.com/en/api.html#express.json

修改你的代码

let databody = {
        "name": `${name}${lastname}`,
        "otherprop": this.state.otherprop
}

从前端使用body: JSON.stringify(databody),

在快递端删除urlencodedParser ，应如下所示：

app.post("/competitors", function (req, res) {
    console.log(req.body);
});

Answer 2

您正在使用urlencodedParser作为中间件，所以我猜您使用了bodyParser.urlencoded({})但是您的请求正在发送json格式。 尝试通过添加以下标头来调整您的请求：

'Content-Type': 'application/x-www-form-urlencoded'

编辑：

正文也应采用以下格式：

body: `name=${name}${lastname}`