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属性下提供。

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

或者您使用的是什么快递版本？大于4.16吗？然后您也可以使用

app.use(express.json());

请参阅注释here

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

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

2 个答案: