fetch() POST 请求到 Express.js 生成空体 {}

Wro*_*ski 19 javascript fetch express body-parser

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


我的代码:

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>
Run Code Online (Sandbox Code Playgroud)

服务器.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);
});
Run Code Online (Sandbox Code Playgroud)

当前: console.log(req.body)日志{}

期望: console.log(req.body)日志"MY DATA"

笔记:

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

Ale*_*sky 18

除了您当前的 bodyParser app.use() 之前,添加以下行:

app.use(bodyParser.json());
Run Code Online (Sandbox Code Playgroud)

这将使bodyParser能够解析application/json.

希望这有帮助!

  • 2021 版本是使用 `app.use(express.json())` (6认同)
  • 这里围绕“之前”和“之后”的语言 - 有点令人困惑!对此的任何澄清都会有所帮助。 (4认同)

Wro*_*ski 7

一旦我弄清楚了什么bodyParser.urlencoded(来源:https : //www.npmjs.com/package/body-parser#bodyparserurlencodedoptions),我现在觉得有点愚蠢

返回仅解析 urlencoded 主体的中间件

解决方案

更改了fetch()请求,从:

body: "MY DATA",
headers: { "Content-Type": "application/json" }
Run Code Online (Sandbox Code Playgroud)

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

这解决了问题!控制台记录:

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