fetch() 对 Express.js 的 POST 请求生成空正文 {}答案

【问题标题】：fetch() POST request to Express.js generates empty body {}fetch() 对 Express.js 的 POST 请求生成空正文 {}
【发布时间】：2018-10-07 00:07:31
【问题描述】：

目标： 在 fetch() 函数中从 HTML 发送一些已定义的字符串数据，例如“我的数据”

我的代码：

HTML

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">
    function fetcher() {
      fetch('/compute',
        {
          method: "POST",
          body: "MY DATA",
          headers: {
            "Content-Type": "application/json"
          }
        }
      )
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
    }
</script>

</body>
</html>

Server.js

var express = require("express");
var app     = express();
var compute = require("./compute");
var bodyParser = require("body-parser");

//not sure what "extended: false" is for
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/compute', (req, res, next) => {
    console.log(req.body);
    var result = compute.myfunction(req.body);
    res.status(200).json(result);
});

目前： console.log(req.body)记录{}

期望： console.log(req.body) 记录 "MY DATA"

注意事项：

我还尝试在 fetch() 中以 body: JSON.stringify({"Data": "MY DATA"}) 发送正文，但得到相同的空{}
我的 fetch() 请求或 bodyParser() 设置不正确。

【问题讨论】：

标签： javascript express fetch-api body-parser

【解决方案1】：

在您当前的 bodyParser app.use() 之前添加以下行：

app.use(bodyParser.json());

这将使bodyParser 能够解析application/json 的内容类型。

希望对您有所帮助！

【讨论】：

啊啊啊！我之前有过这个，但是之后 app.use(bodyParser.json())。切换这些解决了它！谢谢。
这里的“之前”和“之后”的语言 - 有点混乱！对此的任何澄清都会有所帮助。
他的意思是在app.post(...)之前添加app.use(bodyParser.json());
2021版本使用app.use(express.json())

【解决方案2】：

当我弄清楚bodyParser.urlencoded（来源：https://www.npmjs.com/package/body-parser#bodyparserurlencodedoptions）后，我现在觉得有点愚蠢

返回仅解析 urlencoded 正文的中间件

解决方案

更改了fetch() 请求，来自：

body: "MY DATA",
headers: { "Content-Type": "application/json" }

到

body: JSON.stringify({"Data": "MY DATA"}),
headers: { "Content-Type": "application/x-www-form-urlencoded" }

解决了这个问题！控制台记录：

{ '{"数据":"我的数据"}': '' }

【讨论】：

可以保留application/json内容类型，只需要再增加一行配置即可。用你的原始抓取和内容类型试试我的回答。
@AlexanderStaroselsky，是的，我更喜欢您的回答，因为它会产生更清晰的响应：{ data: 'MY DATA' }