web-dev-qa-db-ja.com

fetch（）POST Express.jsへのリクエストは空の本文を生成します{}

Goal：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"_

注：

  1. また、fetch（）でbody: JSON.stringify({"Data": "MY DATA"})としてbodyを送信しようとしましたが、同じ空の{}を取得します。
  2. Fetch（）リクエストまたはbodyParser（）が正しく設定されていません。
javascriptexpressfetchbody-parser
5
Wronski

直前の現在のbodyParserapp.use（）に加えて、次の行を追加します。

app.use(bodyParser.json());

これにより、 bodyParser がapplication/jsonのコンテンツタイプを解析できるようになります。

うまくいけば、それが役立つでしょう！

4
Alexander Staroselsky

_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" }
_

これで問題は解決しました！ログに記録されたコンソール：

{'{"データ"： "マイデータ"}'： ''}

1
Wronski