React前端提交表单至Node.js后端，后端无法接收数据的解决咨询

问题代码 #

Node.js 服务端代码 #

app.post('/create-checkout-session', (req,res) =>{
  console.log(req.form);
  console.log(req.body);
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price: "price_id",
        quantity: 1,
      },
    ],
    metadata: {
      id: 1,
      email: "soubhagya",
    },
    mode: "payment",
    success_url: `https://www.youtube.com/?success=true`,
    cancel_url: `https://www.youtube.com/?canceled=true`,
  });

  res.redirect(303, session.url);
})

React 前端代码 #

<form
    action="http://localhost:4000/create-checkout-session"
    method="POST"
>
  <input
    type="text"
    name="user"
    value="hellowowowowowo"
    disabled
  />
  <button
    type="submit"
    className="w-32 text-white bg-primary-purple hover:bg-primary-700 font-medium rounded-sm text-sm p-4 xs:w-full"
  >
    GET STARTED
  </button>
</form>

解决方法 #

1. 配置表单解析中间件 #

Express框架默认不会解析表单提交的数据，需要添加express.urlencoded()中间件处理application/x-www-form-urlencoded格式的请求，在应用初始化代码中加入：

const express = require('express');
const app = express();

// 解析表单数据
app.use(express.urlencoded({ extended: true }));

2. 修复前端禁用的输入框 #

带有disabled属性的表单元素不会被提交，若需要传递该字段值，将disabled替换为readOnly：

<input
  type="text"
  name="user"
  value="hellowowowowowo"
  readOnly
/>

3. 修复服务端async/await语法问题 #

服务端代码中使用了await但回调函数未标记为async，会触发语法错误，同时建议添加错误捕获：

app.post('/create-checkout-session', async (req,res) =>{
  console.log(req.body); // 现在可正常获取表单数据
  try {
    const session = await stripe.checkout.sessions.create({
      line_items: [
        {
          price: "price_id",
          quantity: 1,
        },
      ],
      metadata: {
        id: 1,
        email: req.body.user, // 可直接使用表单传递的user值
      },
      mode: "payment",
      success_url: `https://www.youtube.com/?success=true`,
      cancel_url: `https://www.youtube.com/?canceled=true`,
    });

    res.redirect(303, session.url);
  } catch (error) {
    res.status(500).send(error.message);
  }
})

验证 #

完成上述修改后，提交表单时后端的console.log(req.body)会输出{ user: 'hellowowowowowo' }，即可正常接收表单数据。

内容的提问来源于stack exchange，提问作者Kiran S youtube channel