FetchAPIでHTMLからNode.jsに非同期でJSONパラメータを送る

もきち もきち 2019.04.08

こんにちは。もきちです。
今回は、JavascriptのFetchAPIを使って、サーバー側のNode.jsに非同期でJSONパラメータを送信する方法をご紹介します。

フロント側(パラメータ送信側)

まずはパラメータを送信するフロント側の記述から。

フロント側では特に難しいことはありません。
パラメータはbodyにデータを入れるのと、headersの記述を忘れないようにしてくださいね。

サーバー側(パラメータ受信側)

次に、パラメータを受信するサーバー側の設定です。
ここに落とし穴がありました。

これでいける…!!と思ったんですが、request.bodyの中身がundefinedになってしまいました。
そこで必要になったのが「body-parser」です。

body-parserを記述する

まずはbody-parserをインストールします。

続いて、以下の3行をvar app = express()の下に記述します。

 
*サーバー側修正版

 
今回、Node.jsを初めて触りましたが、いくつかつまづいた点がありましたので、
他にもご紹介していきたいと思います。

POPULAR

もきち

書いた人

もきち

Director / Engineer