クライアントからのPOSTで送信されたデータを表示したい

前提・実現したいこと

Node.jsの質問お願いします。
クライアントからサーバーに、json形式のデータをPOSTで送信した際に、
サーバー(Node.js)側でconsole.logで表示する方法を知りたいです。

index.html内の{ "aaa": "bbb" }をnode.js側のconsole.logで表示したいです。

Express等を使わない方法でお願いします。

発生している問題・エラーメッセージ

req.bodyを使うとundefinedになって、
req.onを使うと[object Object]と表示されてしまいます。

該当のソースコード

index.html

html
1<html>
2
3<head>
4    <title>テスト</title>
5    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6</head>
7
8<body>
9    <button onclick="func()">送信</button>
10</body>
11
12<script lang="javascript">
13    const xhr = new XMLHttpRequest();
14    function func() {
15        xhr.open('POST', "/api");
16        xhr.send({ "aaa": "bbb" });
17    };
18</script>
19
20</html>

index.js

javascript
1const http = require('http');
2const fs = require('fs');
3
4const server = http.createServer((req, res) => {
5    if (req.url === '/') {
6        fs.readFile('./index.html', (err, data) => {
7            res.writeHead(200, { 'Content-Type': 'text/html' });
8            res.write(data);
9            res.end();
10        });
11    }
12    if (req.url === '/api') {
13
14        // 色々やってみたが分からなかった
15
16        // req.on('data', function (chunk) {
17        //     console.log(chunk);
18        //     console.log(chunk.toString('UTF-8'));
19
20        //     console.log(chunk.toJSON().data.toString('UTF-8'));
21        // }).on('end', function () {
22
23        // })
24
25        // console.log(req.body);
26        res.end();
27
28    }
29});
30server.listen(3000);

yoorwm

2020/07/21 06:46

そのconsoleというのはどこにあるんですか？

oga_a

2020/07/21 06:53

index.jsのコメントアウトしている箇所に正しいプログラムを書いて、"bbb"と表示したいです。

oga_a

2020/07/21 06:54

console.logで表示したいです。

行動規範の内容に同意します

回答1件

ベストアンサー

req.onを使うと[object Object]と表示されてしまいます

JSON はテキストフォーマットです。- XMLHttpRequset で send() する際、文字列化していないため、"[object Object]" が送信されています。

diff
1- xhr.send({ "aaa": "bbb" });
2+ xhr.send(JSON.stringify({ "aaa": "bbb" }));

index.html内の{ "aaa": "bbb" }をnode.js側のconsole.logで表示したいです。

javascript
1const http = require('http');
2//const fs = require('fs');
3const html =`<!DOCTYPE html>
4<html>
5<head>
6  <meta charset="UTF-8">
7  <title>テスト</title>
8</head>
9<body>
10  <button onclick="func()">送信</button>
11</body>
12<script lang="javascript">
13function func() {
14  // func() 内で宣言し、関数を抜けた後はガベージコレクタに回収させる
15  const xhr = new XMLHttpRequest();
16  xhr.open('POST', "/api");
17  xhr.setRequestHeader("Content-Type","application/json");
18  xhr.send(JSON.stringify({ "aaa": "bbb" }));
19};
20</script>
21</html>`;
22
23const server = http.createServer((req, res) => {
24  let { headers, url } = req;
25  if (req.url === '/') {
26    console.log( url );
27    console.log( headers );
28    res.writeHead(200, { 'Content-Type': 'text/html' });
29    res.end(html);
30  }
31  else if (req.url === '/api') {
32    console.log( url );
33    console.log( headers );
34    let data = "";
35    req.on("data",(buf)=>{
36      data += buf.toString("utf8");
37    })
38    req.on("end",()=>{
39      console.log( data ); // 結果表示
40      res.writeHead(200, { 'Content-Type': 'text/plain' });
41      res.end("OK");
42    })
43  }
44  // favicon など
45  else {
46    res.writeHead(500, { 'Content-Type': 'text/plain' });
47    res.end("Internal Server Error");
48  }
49});
50server.listen(3000);
51

コメントを受けて追記

JSON.stringifyを使わずに送信することはできますか？

HTTP通信でやり取りされるデータは json.org が公開するテキストの形 "{\"aaa\":\"bbb\"}"にする必要がありますので、ネイティブ実装された JSON.stringify() を介するのが手軽です。
JSON.stringifyを使わずに実装する場合、自前で変換関数を実装するので、無駄なコストになります。