从 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();
});
纳沃内尔·塔鲁克达尔

如果没有先安装bodyparser这会在您的处理程序之前解析中间件中的传入请求正文,这将在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),

在 express 端 remove urlencodedParser,应该如下所示:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Openui5 jquery POST 到 Node.js 服务器在服务器端包含空的请求正文

来自分类Dev

使用 React.js 和 Express.js POST 表单数据到服务器

来自分类Dev

在Node.js服务器上的POST请求上执行循环

来自分类Dev

在Node.js服务器上的POST请求上执行循环

来自分类Dev

将来自Azure node.js Web应用程序的请求发布到另一台服务器。请求的问题:连接EACCES错误

来自分类Dev

Node JS Nodemailer POST 内部服务器错误 500

来自分类Dev

如何修复对Node.js服务器的提取请求?

来自分类Dev

Node.js服务器如何处理请求?

来自分类Dev

请求到达 node js 服务器时的执行流程

来自分类Dev

node.js http服务器并发问题

来自分类Dev

node.js http服务器并发问题

来自分类Dev

ngFlow到Forimidable node.js服务器

来自分类Dev

Angular JS请求到远程Sails服务器

来自分类Dev

关于 ajax 向 node.js POST 请求的问题(错误)

来自分类Dev

Ember.js POST请求从服务器(Grape API)返回400,但已成功存储到本地存储中

来自分类Dev

在React.js中使用axios发送POST请求的问题

来自分类Dev

表示服务器的Javascript提取(POST)失败。服务器未从JS接收请求,但从Postman接收请求

来自分类Dev

当在react.js中附加表单请求时,请求正文在服务器node.js中显示未定义

来自分类Dev

使用Java的React.js服务器端渲染[没有Node.js]

来自分类Dev

Socket.io Node Js服务器和React js客户端未连接

来自分类Dev

Node.js-服务来自同一服务器上运行的tomcat的请求

来自分类Dev

带有后端node.js服务器的create-react-app与未设置node.js服务器的create-react-app之间的区别

来自分类Dev

Node.js HTTP服务器

来自分类Dev

Node.js状态服务器

来自分类Dev

如何创建Node JS服务器

来自分类Dev

Node.js HTTP服务器

来自分类Dev

调用node.js服务器

来自分类Dev

崩溃服务器 node.js

来自分类Dev

如何编写Node.js Express服务器以接收curl POST

Related 相关文章

  1. 1

    Openui5 jquery POST 到 Node.js 服务器在服务器端包含空的请求正文

  2. 2

    使用 React.js 和 Express.js POST 表单数据到服务器

  3. 3

    在Node.js服务器上的POST请求上执行循环

  4. 4

    在Node.js服务器上的POST请求上执行循环

  5. 5

    将来自Azure node.js Web应用程序的请求发布到另一台服务器。请求的问题:连接EACCES错误

  6. 6

    Node JS Nodemailer POST 内部服务器错误 500

  7. 7

    如何修复对Node.js服务器的提取请求?

  8. 8

    Node.js服务器如何处理请求?

  9. 9

    请求到达 node js 服务器时的执行流程

  10. 10

    node.js http服务器并发问题

  11. 11

    node.js http服务器并发问题

  12. 12

    ngFlow到Forimidable node.js服务器

  13. 13

    Angular JS请求到远程Sails服务器

  14. 14

    关于 ajax 向 node.js POST 请求的问题(错误)

  15. 15

    Ember.js POST请求从服务器(Grape API)返回400,但已成功存储到本地存储中

  16. 16

    在React.js中使用axios发送POST请求的问题

  17. 17

    表示服务器的Javascript提取(POST)失败。服务器未从JS接收请求,但从Postman接收请求

  18. 18

    当在react.js中附加表单请求时,请求正文在服务器node.js中显示未定义

  19. 19

    使用Java的React.js服务器端渲染[没有Node.js]

  20. 20

    Socket.io Node Js服务器和React js客户端未连接

  21. 21

    Node.js-服务来自同一服务器上运行的tomcat的请求

  22. 22

    带有后端node.js服务器的create-react-app与未设置node.js服务器的create-react-app之间的区别

  23. 23

    Node.js HTTP服务器

  24. 24

    Node.js状态服务器

  25. 25

    如何创建Node JS服务器

  26. 26

    Node.js HTTP服务器

  27. 27

    调用node.js服务器

  28. 28

    崩溃服务器 node.js

  29. 29

    如何编写Node.js Express服务器以接收curl POST

热门标签

归档