Node Express服务器接收Payload后前端表单赋值显示undefined问题

核心问题 #

前端使用axios发送POST请求时参数传递错误，将包含method、headers等的完整配置对象当作请求体发送给了服务器，导致服务器解析的req.body并非预期的did和scope字段，进而返回的响应数据中对应字段为undefined，最终表单填充时显示undefined。

修复方案 #

修正前端的axios请求逻辑，遵循axios.post(url, 请求体数据, 配置选项)的标准语法：

VCRequestButton.addEventListener('click', function() {
  // 定义要发送的请求体数据
  const requestBody = {
    "did": "实际要传递的did值",
    "scope": "实际要传递的scope值"
  };

  // 请求配置（可选，axios自动处理JSON格式的Content-Type）
  const requestConfig = {
    headers: {
      "Accept-Charset": "application/json"
    },
    redirect: 'follow'
  };

  axios.post("http://localhost:8080", requestBody, requestConfig)
  .then(response => {
    const responseData = response.data;
    // 将响应数据填充到表单
    document.querySelector('input[name="subject-did"]').value = responseData.did;
    document.querySelector('input[name="credential-type"]').value = responseData.scope;
  })
  .catch(error => {
    console.error("请求出错", error);
  });
});

补充说明 #

• axios默认会自动将JSON格式的请求体序列化，并设置Content-Type: application/json请求头，无需手动添加该头信息。
• 服务器端代码无需修改，只要前端发送的请求体结构正确，req.body.did和req.body.scope就能正确获取到值，返回的响应数据也会包含有效内容，前端即可正常填充表单。

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