Fetch Api 无法将内容发布到服务器

Question

我在我的网站上创建了一个聊天室，并使用表单的默认操作将消息数据发布到服务器并将其存储在 MongoDB 中。 但是，知道我正在尝试通过使用 fetch 来实现它，因为数据将发送到服务器而不会同时刷新页面。 但是，在将数据以 JSON 格式发布到服务器后，服务器无法获取该帖子的数据。 我也在使用 Body Parser 来获取 req 对象中的数据，但是，这也不起作用，它显示数据为空。 有人可以告诉我如何解决这个问题吗？

我的 HTML：

 <form id="form-container"> <input type="text" id="user-name-input" name="userName"> <input required type="text" id="message-input" name="message" placeholder="Send a message here!"> <button type="submit" id="submit-button">Submit</button> </form>

我的客户端 Javascript：

 submitButton.addEventListener('click', (e) => { e.preventDefault(); var message = document.getElementById('message-input').value; fetch('/dps/chat/request-message-insert', { method: 'POST', body: JSON.stringify({ userName: userName, message: message }), headers: { 'Content-Type': "application/json; charset=UTF-8" } }).then(res => res.json()).then(data => console.log(data)); })

我的 server.js 文件：

 app.post('/dps/chat/request-message-insert', urlencodedParser, (req, res) => { console.log(req.body) const userName = req.body.userName; const message = req.body.message; client.connect(async (err) => { const collection = client.db("gradilo").collection("chat-messages"); await collection.insertOne({ text: message, userName: userName }) await client.close(); }) })

Answer 1

我会检查你的代码你的服务器端是否完美，但我认为问题是客户端有一些问题。

• 检查异步等待，因为我认为通过用户获取您的 DOM 的响应并不完美，并且当通过 post 发送 API 然后显示问题时，消息是完美的工作。 我将提供以下链接以帮助您
• https://www.topcoder.com/thrive/articles/fetch-api-javascript-how-to-make-get-and-post-requests

检查此链接与您的解决方案相同

Answer 2

我用一行简单的代码解决了我的问题。 看起来客户端代码和服务器代码都很好。 我们还在 fetch 的选项中指定了标题。 问题是服务器不知道它可以从客户端获取数据的格式。 因此，在 app.post() 方法之前添加以下代码将解决此问题。

 app.use(express.json());

然后，您甚至不需要 npm body-parser 依赖项来解析传入的数据。 数据将被添加到 req.body 对象中，无需任何额外的中间件或依赖项。