Express bodyParserでuse individual json/urlencodedの警告の修正

BFFのExpressで警告が発生

今回は、以前こちらの記事で紹介したbodyParserの扱い方で、警告が出ていたため修正方法を掲載していきたいと思います。

TypeScript × ExpressでPOSTでのRequestのbodyが取得できない時

ExpressでPOST Requestのbodyが取得できないTypeScript × Nuxtでプログラミングをしていて、UniversalモードだとSPA部分で外部と連携する時にCORSの設定をしないとエラーになりますよね！もちろんC

awesome-linus.com

発生した警告

発生した警告メッセージはこちらになります。

body-parser deprecated bodyParser: use individual json/urlencoded middlewares app/server/bff.ts:23:30
body-parser deprecated undefined extended: provide extended option node_modules/body-parser/index.js:105:29

警告の原因

警告が発生していた部分はこちらです！

bodyParserのインスタンスをそのまま渡していたことにより、警告が発生していたようです。

bff.use(bodyParser());

解決方法

警告を消す方法自体はとても簡単でした！

以下の記事にも記載のある通り、

app.use(bodyParser.urlencoded());
# または
app.use(bodyParser.json());

のようにリクエストのbodyをどの形式でパースしてあげるのかを指定してあげればOKです！

bodyParser is deprecated express 4

I am using express 4.0 and I'm aware that body parser has been taken out of the express core, I am using the recommended replacement, however I am getting bod...

stackoverflow.com

今回は一番扱いやすいJSONでパースするように指定しますが、BFF側(受け取る側)とNuxt側(送る側)で設定を確認しておいた方が良いためそれぞれ確認していきます！

BFF側

まずBFF側では警告が発生していたため、リクエストのbodyをJSONでパースしてあげるように指定すればOKです！

これで警告は無くなります！

bff.use(bodyParser.json());

Nuxt側

Nuxt側では、リクエストを送信する時の形式を確認しておきます！

ここではAxiosを使用していますので、Axiosの設定を確認し、設定していきます！

headerのcontent-typeにapplication/jsonを指定して、JSONで送るようにします。

AxiosのデフォルトはJSONなので指定しなくても問題ないですが、ここでは明示的に指定しておきたいと思います。

headers = { 'content-type': 'application/json' };

ここらへんのオプションはAxiosRequestConfigとして、Axiosへ渡してインスタンスを生成すればOKです。

まとめ

今回は、BFFで使用しているExpressのbodyParserでuse individual json/urlencodedの警告が出た時の対処方法について解説しました！

警告自体の対処方法は非常に単純でしたので、簡単に対処することができましたね！