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

2022-01-20 00:00:00 express fetch javascript body-parser

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

Goal: send some defined string data from HTML in a fetch() function e.g. "MY DATA"

我的代码:

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"

注意事项:

  1. 我还尝试将 fetch() 中的正文作为 body: JSON.stringify({"Data": "MY DATA"}) 发送，但得到相同的空 {}
  2. 我的 fetch() 请求或 bodyParser() 设置不正确.
  1. I also tried sending body in fetch() as body: JSON.stringify({"Data": "MY DATA"}) but get the same empty {}
  2. I either my fetch() request, or my bodyParser(), is not setup correctly.

推荐答案

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

Add the following line in addition to your current bodyParser app.use() right before:

app.use(bodyParser.json());

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

This will enable bodyParser to parse content type of application/json.

希望对您有所帮助！

相关文章