node.js - 尝试将表单数据发送到 Express 应用程序，无法正确解析为 req.body

Question

我知道类似的问题已经被问过很多次了，例如这里。

但是，我尝试从这些答案中应用各种解决方案，但没有成功。

这是我的客户端页面：

<form id="submit_newuser" method="POST" action="/submit_newuser">
    User name:
    <input type="text" id="username" name="username" />
    <br>
    Phone number:
    <input type="text" id="phonenumber" name="phonenumber" />
    <br><br>
    <input type="submit" />
</form>

<script>
document.getElementById("submit_newuser").addEventListener('submit',submit_newuser);

function submit_newuser(event){
    event.preventDefault();
    submit_newuserForm=document.getElementById("submit_newuser");
    formData=new FormData(submit_newuserForm);
    fetch("/submit_newuser",{
        body:formData,
        headers:{
            "Content-Type": "application/json"
        },
        method:"post"
    })
    .then(response=>console.log(response))
    .catch(err=>"submit_newuser: error: "+err);
}
</script>

这是端点的相关服务器端代码/submit_newuser：

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/submit_newuser',function(req,res){
    console.log("/submit_newuser: req.body: "+JSON.stringify(req.body));
    var phonenumber=req.body.phonenumber;
    var username=req.body.username;
    var output="you submitted: "+username+" "+phonenumber;
    console.log("/submit_newuser: text to send back: "+output);
    res.send(output);
});

这样，当我从页面提交数据时，服务器会记录此错误：

SyntaxError: Unexpected token - in JSON at position 0

当我将 Content-Type 更改为“application/x-www-form-urlencoded”时，我得到了这个控制台日志：

/submit_newuser: req.body: {"------WebKitFormBoundaryBDU4OcntAv7d5wWL\r\nContent-Disposition: form-data; name":"\"username\"\r\n\r\ntestUserName\r\n------WebKitFormBoundaryBDU4OcntAv7d5wWL\r\nContent-Disposition: form-data; name=\"phonenumber\"\r\n\r\ntestPhoneNumber\r\n------WebKitFormBoundaryBDU4OcntAv7d5wWL--\r\n"}

/submit_newuser: text to send back: you submitted: undefined undefined

这表明数据正在发布到服务器，但未正确解析为req.body.

涉及的解决方案multer似乎不适用于这里，因为我没有上传文件，但我不确定是否应该使用与在正文中发布FormData对象不同的方法。fetch()

我很困惑，也想知道是否有更简单的方法可以做到这一点。我只想在不触发页面刷新的情况下将表单数据发布到服务器，并且能够使用服务器响应更新页面元素。

标签： node.jsfetch-apiform-databody-parser

Answer 1

如果您尝试将客户端的请求作为 formData 发送，那么您必须处理后端以接收作为 formData 的请求。

有一个名为multer的 npm 模块用于处理 formData 请求类型。

无论如何，您的代码必须更改为以下内容：

客户端

<script>

 document.getElementById("submit_newuser").addEventListener('submit',submit_newuser);

  function submit_newuser(event){
    event.preventDefault();
    submit_newuserForm=document.getElementById("submit_newuser");
    formData=new FormData(submit_newuserForm);
    fetch("http://127.0.0.1:3000/submit_newuser",{
        body:formData,
        method:"post"
    })
    .then(response=>console.log(response))
    .catch(err=>"submit_newuser: error: "+err);
}
</script>

服务器端

const multer = require('multer');
const upload = multer();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/submit_newuser', upload.none(), function (req, res) {
  console.log("/submit_newuser: req.body: " + JSON.stringify(req.body));
  var phonenumber = req.body.phonenumber;
  var username = req.body.username;
  var output = "you submitted: " + username + " " + phonenumber;
  console.log("/submit_newuser: text to send back: " + output);
  res.send(output);
});