JS向Node.js传注册数据时req.body undefined问题及解决方法

一、解决newuser显示undefined的问题 #

你的代码存在两个核心问题，导致后端无法正确解析前端传递的JSON数据：

1. 前端请求头拼写错误 #

前端fetch的headers中Content-type拼写错误，正确写法是application/json（少写了一个字母p）：

function finish() {
    if (valid) {
        const postData = {
          email: email.value,
          username: username.value,
          password: password.value,
          password2: password2.value
        };
      
        fetch('/register', {
            method: 'POST',
            headers: {
                "Content-type": "application/json" // 修复拼写错误
            },
            body: JSON.stringify(postData)
          });
    }
}

2. 后端未配置JSON解析中间件 #

如果使用Express框架，默认不会自动解析JSON格式的请求体，必须添加express.json()中间件来完成解析：

// 在所有路由定义前添加该中间件
app.use(express.json());

app.post('/register', async (req, res) => {
  try {
    const email = req.body.email;
    const newuser = req.body.username;
    const password = req.body.password;
    const repetpasword = req.body.password2;
    console.log(newuser);
    if (checkvalidinput(email, newuser, password, repetpasword)) {
      res.render('startpage')
    } else {
      const message = 'something is wrong' // 顺便修复拼写错误
      res.render('errormessage', {message: message});
    }
  } catch (error) {
    console.log(error);
  }
});

额外检查项 #

• 确认valid变量的值为true，否则fetch请求不会触发
• 确认email、username等变量正确绑定了表单DOM元素（比如通过document.getElementById获取）

二、JS向Node.js传递数据的其他方法 #

除了JSON格式的POST请求，还有以下几种常用传参方式：

1. GET请求+URL查询参数 #

将数据拼接在URL的查询字符串中，后端通过req.query获取：

// 前端
function finish() {
  if (valid) {
    const params = new URLSearchParams({
      email: email.value,
      username: username.value
    });
    fetch(`/register?${params}`, { method: 'GET' });
  }
}

// 后端
app.get('/register', (req, res) => {
  const username = req.query.username;
  console.log(username);
});

2. 表单编码格式（x-www-form-urlencoded） #

适合传统表单提交，后端需配置express.urlencoded()中间件：

// 前端
function finish() {
  if (valid) {
    const formData = new URLSearchParams();
    formData.append('email', email.value);
    formData.append('username', username.value);
    
    fetch('/register', {
      method: 'POST',
      headers: {
        "Content-type": "application/x-www-form-urlencoded"
      },
      body: formData
    });
  }
}

// 后端
app.use(express.urlencoded({ extended: true }));
app.post('/register', (req, res) => {
  const username = req.body.username;
  console.log(username);
});

3. FormData格式 #

主要用于上传文件或包含文件的复杂表单：

// 前端
function finish() {
  if (valid) {
    const formData = new FormData();
    formData.append('email', email.value);
    formData.append('username', username.value);
    // 若需上传文件：formData.append('avatar', fileInput.files[0]);
    
    fetch('/register', {
      method: 'POST',
      body: formData // 无需手动设置Content-Type，浏览器自动处理
    });
  }
}

// 后端
const multer = require('multer');
const upload = multer(); // 仅解析FormData，不存储文件
app.post('/register', upload.none(), (req, res) => {
  const username = req.body.username;
  console.log(username);
});

4. 自定义格式（如XML） #

虽不常用，但可手动传递自定义格式数据，后端手动解析：

// 前端
function finish() {
  if (valid) {
    const xmlData = `<user><email>${email.value}</email><username>${username.value}</username></user>`;
    fetch('/register', {
      method: 'POST',
      headers: {
        "Content-type": "application/xml"
      },
      body: xmlData
    });
  }
}

// 后端
const xmlParser = require('xml2js').parseString;
app.post('/register', (req, res) => {
  let xmlData = '';
  req.on('data', chunk => xmlData += chunk);
  req.on('end', () => {
    xmlParser(xmlData, (err, result) => {
      const username = result.user.username[0];
      console.log(username);
    });
  });
});

内容的提问来源于stack exchange，提问作者Pavel Jinar