express cors request.body formData显示undefined答案

【问题标题】：express cors request.body formData show undefinedexpress cors request.body formData显示undefined
【发布时间】：2023-02-25 02:51:25
【问题描述】：

我是在模仿cors的request来表达。状态正常，请求和响应成功。网络显示填充有表单数据的有效负载。 Hovewer 在 nodejs 终端登录控制台undefined。

使用以下代码发送表单字段：

<form id="formElt">
    <input type="text" name="FirstInput" id="" value="FirstInputValue"/>
    <input type="text" name="SecondInput" id="" value="SecondInputValue"/>
</form>
<button class="postBtn">POST</button>
<script>
postBtn.onclick = async () => {          
    let formElt = this.querySelector('#formElt');
    let fd = new FormData(formElt);
    fd.append('testInput', 'TestInputValue');
    await fetch('http://localhost:8080/add', {
        method: 'post',
        body: fd                
    })
    .then(res => {
         return res.text();                  
    })
    .then(data=>{
         p.innerText = data;
    })
}
</script>

在 nodejs 端有：

const Router = require('express');
const cors = require('cors');
const router = Router();
router.use(cors())
const postOptions = {
    origin: 'http://127.0.0.1:5500',
}
router.post('/add', cors(postOptions), (req, res)=> {
    console.log(req.body);
    res.send('hello from node! Data received!');
})

【问题讨论】：

这个问题是否只发生在你发送 fd 到你体内的时候？你用字符串试过吗？
我不清楚是什么过程。甚至，在fd.append('testInput', 'TestInputValue') 调用console.log(fd) 之后，控制台也会记录一个空的FormData {}。但是，为什么有效载荷填充了预期的内容？
尝试在正文中传递一个字符串。 F.e. body: 'foo' 查看那里的响应是否未定义。
完全一样。Payload显示：Request Payload 'foo', nodejs logs undefined
之前尝试在变量中定义您的字符串。在你的 Body 中使用：JSON.stringify(VARNAME) 让我知道这是否有效

标签： node.js express cors fetch form-data

【解决方案1】：

您缺少 express 中的 form-data 解码代码。

// for form-data
const multer = require('multer');
const forms = multer();
router.use(forms.array());

完整代码 HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device=width, intial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="is=edge" />
    <title>Form data</title>
  </head>

  <body>
    <form id="formElt">
      <input type="text" name="FirstInput" id="" value="FirstInputValue" />
      <input type="text" name="SecondInput" id="" value="SecondInputValue" />
    </form>
    <button id="postBtn">POST</button>
    <script>
      postBtn.onclick = async () => {
        let formElt = document.getElementById("formElt");
        let fd = new FormData(formElt);
        fd.append("testInput", "TestInputValue");
        await fetch("http://localhost:8080/add", {
          method: "post",
          body: fd,
        })
          .then((res) => {
            return res.text();
          })
          .then((data) => {
            p.innerText = data;
          });
      }
    </script>
  </body>
</html>

服务器.js

const Router = require('express');
const cors = require('cors');
const router = Router();
router.use(cors())

// for form-data
const multer = require('multer');
const forms = multer();
router.use(forms.array()); 

// for x-www-form-urlencoded
router.use(Router.urlencoded({ extended: true }))

// for raw JSON
router.use(Router.json()); 

const postOptions = {
    origin: 'http://127.0.0.1:5500',
}

router.post('/add', cors(postOptions), (req, res)=> {
    console.log(JSON.stringify(req.body, null, 4));
    res.send('hello from node! Data received!');
})

router.listen(8080, () => { console.log("Listening on :8080") })

启动服务器

node server.js

通过 Go-Live 扩展从 VS 代码启动 index.html。

在server.js 收到数据

【讨论】：