Node.js Express で jQuery.ajax のPOSTを受信できない

Question

サーバ側Node ソース

onst bodyParser = require('body-parser');
const express = require('express');
const app = express();
app.use(bodyParser.json());
app.use(express.static(__dirname + '/static'));
app.post('/test', async (req, res) => {
  console.log(JSON.stringify(req));
});

クライアント側

$.ajax({
        url: 'http://localhost/test',
        type: 'POST',
        data: { id: '12345' },
        dataType: 'json',
        contentType: 'application/json',
    });

これを実行すると、サーバ側で以下のエラーが発生します。

SyntaxError: Unexpected token b in JSON at position 0
    at JSON.parse (<anonymous>)
    at createStrictSyntaxError (C:\Program Files (x86)\Nodist\bin\node_modules\body-parser\lib\types\json.js:158:10)
    at parse (C:\Program Files (x86)\Nodist\bin\node_modules\body-parser\lib\types\json.js:83:15)
    at C:\Program Files (x86)\Nodist\bin\node_modules\body-parser\lib\read.js:121:18
    at invokeCallback (C:\Program Files (x86)\Nodist\bin\node_modules\body-parser\node_modules\raw-body\index.js:224:16)
    at done (C:\Program Files (x86)\Nodist\bin\node_modules\body-parser\node_modules\raw-body\index.js:213:7)
    at IncomingMessage.onEnd (C:\Program Files (x86)\Nodist\bin\node_modules\body-parser\node_modules\raw-body\index.js:273:7)
    at IncomingMessage.emit (events.js:203:15)
    at endReadableNT (_stream_readable.js:1145:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

ちなみに、これが出る前にいろいろいじりまわしており、動作していることがあったのですが、console.log(req.body.id ) であっても値を取得することができませんでした。

ちなみに、Chrome Talend API Tester でリクエストしたり、URL?id=12345 の形式でPOSTすれば正常動作しました。

この違いがどのように作用しているのか、お分かりになる方にご教示いただきたいです。

Comments

[maisumakun]

bodyParser.json()でパースすべきJSONのbodyはどこでしょうか？

[t4c62096]

bodyParser.json()が詳細に何をしているか、具体的な理解はしていないことをまずお話しておきます。

リクエストされたJSONをパースしていると想像していますが、ここでエラーが発生しているのでしょうか？
だとしたら、何か記載漏れがあるということでしょうか。

あるいは、POSTされた要求に対してレスポンスする処理が console.log しかなく、返却すべき値がないことを指摘しているのでしょうか。

本件の主題は、リクエストが到達しないことであるため、レスポンスについては質問内容の対象外としているため、console.log のみを処理に記載しています。

ご質問の意図について再確認させてください。

答えになっているかわかりませんが、まずは記載させていただきました。

[maisumakun]

> 本件の主題は、リクエストが到達しないことであるため

いえ、「到達している」からbody-parserでエラーが発生しています。前提が誤りです。

Answer 1

クライアント側からは JSON 文字列を POST しなければならないのですよね？

であれば、jQuery ajax のコードで data に設定するのは JSON 文字列とすべきところが、質問のコードでは JavaScript オブジェクトになっているところが問題の原因だと思うのですが。(今の質問のコードですと id=12345 という文字列が POST されていると思います)

JSON.stringify メソッドを使って JSON 文字列に変換してから data に設定して送信したらどうなりますか？

もしサーバーに POST 送信する文字列は JSON 文字列ではなく、application/x-www-form-urlencoded 形式 (即ち id=12345 というような文字列) でなければならないということであれば、data の設定は今のままで、contentType の設定を application/x-www-form-urlencoded に変更したらどうなりますか？

Comments

[t4c62096]

ありがとうございました
contentType の設定を application/x-www-form-urlencoded に変更
あるいは、data: JSON.stringify({xxx:xxxx}) とすることで解決できました。

Answer 2

リクエストされたJSONをパースしていると想像していますが

いえ、$.ajaxのdataにオブジェクトを書くとクエリ文字列形式に変換されます（jQuery公式）。そもそもJSONが送信されていません。

（$.ajaxでのdataTypeの指定は、レスポンスの解釈のためのものであって、リクエストのエンコードではありません）

Comments

[t4c62096]

なるほど。理解しました。ありがとうございました。

Answer 3

そもそもミドルウェアにasync渡したらだめじゃない？

app.post('/test', (req, res) => {
console.log(req);
});

Comments

[t4c62096]

こちらは、動作はしているのですが、何か良くないことがありますか？
よろしければ、追加情報をよろしくお願いします。

[sousuke]

https://teratail.com/questions/268831
ここら辺。今はコンソールだけだから大丈夫みたい。非同期処理入れると落ちる気がする。