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

我正试图将基于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();
});

---

您正在使用urlencodedParser作为中间件，因此我猜您使用了

bodyParser.urlencoded（{}）

，但您的请求发送的是json格式。尝试通过添加以下标题来调整您的请求：

“内容类型”：“应用程序/x-www-form-urlencoded”

编辑：

此外，正文应采用以下格式：

---

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

您使用的是urlencodedParser作为中间件，所以我猜您使用的是

bodyParser.urlencoded（{}）

，但您的请求发送的是json格式。尝试通过添加以下标题来调整您的请求：

“内容类型”：“应用程序/x-www-form-urlencoded”

编辑：

此外，正文应采用以下格式：

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

如果不是首先安装的话。这将在处理程序之前解析中间件中的传入请求主体，处理程序将在

req.body

属性下可用

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

或者，您使用的express版本是什么？它是否大于4.16？那么你也可以用

app.use(express.json()); 

见附注

修改您的代码

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

从前端使用

body:JSON.stringify（databody），

在express end remove

urlencodedParser

中，应如下所示：

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

如果没有，请先安装。这将在处理程序之前解析中间件中的传入请求主体，处理程序将在

req.body

属性下可用

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

或者，您使用的express版本是什么？它是否大于4.16？那么你也可以用

app.use(express.json()); 

见附注

修改您的代码

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

从前端使用

body:JSON.stringify（databody），

在express end remove

urlencodedParser

中，应如下所示：

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

---

---

新记录是否有名称集或名称集为空？新记录没有名称集，它们是空的。是否使用了

app.use（bodyParser.json（））

然后检查？您应该首先调试后端代码，使用console.log添加一些调试信息（转储捕获的正文数据），或者设置断点并检查请求。类似于：

console.log（JSON.stringify（req.body））

在新的竞争对手之前。我认为错误在于bodyparser。您是否已在express中添加中间件或正确配置了中间件。尝试在routeNew记录上使用

console.log（req.body）

记录请求数据新记录是否设置了名称或其为空？新记录没有设置名称，它们为空。是否使用

app.use（bodyParser.json（））

然后检查？您应该首先调试后端代码，使用console.log添加一些调试信息（转储捕获的正文数据），或者设置断点并检查请求。类似于：

console.log（JSON.stringify（req.body））

在新的竞争对手之前。我认为错误在于bodyparser。您是否已在express中添加中间件或正确配置了中间件。尝试使用

console.log（req.body）

在路由器上记录请求数据，并将其记录在相同的日志中。当我在服务器路由中使用console.log（req.body）时，它显示了错误：POST 500（内部服务器错误）和Uncaught（承诺中）SyntaxError:Unexpected token<在JSON中的位置0我不明白，什么也是=另一个？这只是为了表明可以在同一个字符串中传递多个参数。我编辑了答案以匹配您的请求，这取决于您愿意使用哪种内容类型：）是的，我试图检查你们告诉我的所有选项，但我把它混合了一点，所以它不起作用。我知道你的选择也可以，只是对我来说更好。还是一样。当我在服务器路由中使用console.log（req.body）时，它显示了错误：POST 500（内部服务器错误）和Uncaught（承诺中）SyntaxError:Unexpected token<在JSON中的位置0我不明白，什么也是=另一个？这只是为了表明可以在同一个字符串中传递多个参数。我编辑了答案以匹配您的请求，这取决于您愿意使用哪种内容类型：）是的，我试图检查你们告诉我的所有选项，但我把它混合了一点，所以它不起作用。我知道你的选择也会起作用，只是对我更有效。我做了一切。但还是一样。console.log（req.body）显示：[object]对不起，它可以工作！我不得不把“内容类型”改回“application/json”，因为我因为另一个答案而改变了它。多谢各位@TomaszPaczka您必须将两个请求头与控制器期望的同步。如果标题和正文格式正确，则“json”或“x-www-form-urlencoded”作为“内容类型”都可以正常工作。我做了所有事情。但还是一样。console.log（req.body）显示：[object]对不起，它可以工作！我不得不把“内容类型”改回“application/json”，因为我因为另一个答案而改变了它。多谢各位@TomaszPaczka您必须将两个请求头与控制器期望的同步。如果标题和正文格式正确，则作为“内容类型”的“json”或“x-www-form-urlencoded”都可以正常工作