Fetch 不会 POST 从客户端到服务器端 (Node.js)

Question

问题： 我正在使用 Whosebug members 提供的以下代码。我喜欢这个代码，我希望它能工作，但它没有，正如我将要解释的那样：

目的：从客户端获取输入，用JavaScript修改它，然后POST修改后的变量到服务器端（节点.js/Express).

代码（归功于kwh）：

<body>
  <script type="text/javascript">
    function customSubmit() {
      const name = document.getElementById('name').value + ' mock';
      const city = document.getElementById('city').value + ' mock';
      fetch('/posty', {
        method: 'POST',
        body: JSON.stringify({ name, city })
      })
    }
  </script>
  <form onsubmit="event.preventDefault(); customSubmit()">
    <label for="name">Name: </label>
    <input id="name" name="name" type="text">

    <label for="city">City: </label>
    <input id="city" name="city" type="text">

    <button type="submit">submit</button>
  </form>  
</body>

我有 node.js 和 express.js serverside，我还没有安装 node-fetch。我使用 EJS 作为 HTML 的模板 engine/file 和客户端的 JS。

客户端代码：

app.post('/posty', (req,res) => {

    console.log(req.body)
 
})

其中 returns 控制台（Linux 终端）中的一个空对象：

{}

现在，如果我替换代码中的以下行：

<form onsubmit="event.preventDefault(); customSubmit()">

和

<form action="/posty" method ="POST">

我会在控制台得到一个非空对象：

{ name: 'John', city: 'Berlin' }

但是，这不是解决方案，因为我必须在 POST 将其发送到服务器端 (Node.js) 之前修改此人的姓名和城市。

讨论：

我还没有为 node.js 安装 node-fetch。甚至，如果我安装了它，我将不得不在 node.js 服务器文件中导入模块，该文件在服务器端运行，而不是在客户端运行。我看不到在 node.js 上安装 node-fetch 以在客户端兼容浏览器的 HTML/JS 代码运行中使用 fetch() 到 POST 的意义。

可能在上面给定的代码中缺少某些东西，无论是在服务器端还是客户端，或者两者。如果有人能指出这一点，我将不胜感激。另外，我要感谢 kwh，他提供了干净紧凑的代码，并帮助我组织研究以解决问题。

Answer 1

你在你的路由之前使用了解析的主体吗？你可以用 express.json()

app.use(express.json())
app.post('/posty', (req,res) => {

    console.log(req.body)
 
})

Answer 2

感谢您的回复。我在两个 Whosebug 成员和 Whosebug forum:

上的其他帖子之一的帮助下找到了解决方案

我必须将以下行添加到 kwh 建议的代码中的 fetch() 块 (Client-Side):

headers: new Headers({ "Content-Type": "application/json" })

此外，我按照的建议将以下行添加到 Server-Side 的代码中：

app.use(express.json())

所以 Server-Side 和 Client-Side 分别少了一行代码。我两个都需要。

再次感谢您的快速回复和帮助。

Answer 3

javascript 比 dom 快很多，这就是为什么你需要让浏览器先渲染 dom 然后再执行 js。这是通过这个

完成的

document.addEventListener("DOMContentLoaded", function (event) {
  // content is loaded
  
  const form = document.getElementById("id-of-yow-form");
  form.addEventListener("submit", function (event) {
     event.preventDefault();
     //add yow code
  });

});

确保将相同的 ID 添加到您的表单标签中

 <form id="id-of-yow-form">
    <label for="name">Name: </label>
    <input id="name" name="name" type="text">

    <label for="city">City: </label>
    <input id="city" name="city" type="text">

    <button type="submit">submit</button>
  </form>

Fetch 不会 POST 从客户端到服务器端 (Node.js)

Fetch does not POST from the Client-Side to the Server-side (Node.js)

javascript

post

ejs

fetch

node.js