express cors request.body form数据显示undefined

Question

我在模仿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!');
})

Answer 1

你在

form-data

中缺少

express

解码的代码。

// 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>

server.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

收到数据

如果只使用

JSON.stringify(req.body)

，将显示此输出

    console.log(JSON.stringify(req.body));

POST 三种不同的 Body 数据类型。它匹配

server.js

解码和

result

在服务器和 Postman POST 调用。

express cors request.body form数据显示undefined

问题描述投票：0回答：1

1个回答

最新问题

express cors request.body form数据显示undefined

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1