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

Express

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

TypeScript × Nuxtでプログラミングをしていて、UniversalモードだとSPA部分で外部と連携する時にCORSの設定をしないとエラーになりますよね!

もちろんCORS設定を入れて貰えばいいわけですが、別部署とかでリテラシーの低い人たちに頼むのはめちゃくちゃコストのかかることというのは多々あることだと思います。

その際に、proxyなどが利用できますよね!

基本的にはproxyで事足りることも多々ありますが、場合によっては色々な認証関連やセキュリティ面、またはさらに便利に使いたい時に、BFF化すると良いということがありました。

今回はそのBFF化をExpressでした際に、少し躓いたところがありましたので記事にして残しておきたいと思います。

Nuxtのproxyって何?という方もいると思いますので、参考になる記事を掲載しておきました。

また普段フロントエンドやってるけど、BFFってなに?という方もいると思います。

こちらに参考記事を掲載しておきましたので、知らない方はWebエンジニアとして一読しておきましょう。

POST Requestのbodyが取得できなくて詰まったところ

では早速詰まったところから。

こんな感じでExpressのRouterの部分で、POST Requestを受け取ってbodyconsole.logしたところ全然表示されず少し詰まりました。

import { Router, Request, Response, NextFunction } from 'express';

const router = Router();

router.post('/endpoint', (_req: Request, _res: Response, _next: NextFunction) => {
  console.log("req");
  console.log(_req.body);

  return _res
  .status(200)
  .json('success');
});


export default router;

解決策

ググったら解決することができました。

ExpressPOSTのパラメータを受け取るには、bodyParserをuseする必要があったみたいです。

これは知らないとハマりますね。

bodyParserをExpressでuseする

ExpressでbodyParserをuseします。

以下のように、bodyParserをインポートして、expressインスタンスにuseすればいけました。

bodyParser部分

import bodyParser from 'body-parser';
bff.use(bodyParser());

BFFのExpress全体

import express, { Router } from 'express';
import bodyParser from 'body-parser';

const router = Router();

router.use(***);
router.use(***);

const bff = express();

bff.use(bodyParser());

bff.use('/api', router);

module.exports = bff;

POSTのbodyを取得する部分

bodyParserをuseしたら、console.log(_req.body);で見事にパラメータを受け取ることができました。

import { Router, Request, Response, NextFunction } from 'express';

const router = Router();

router.post('/endpoint', (_req: Request, _res: Response, _next: NextFunction) => {
  console.log("req");
  console.log(_req.body);

  return _res
  .status(200)
  .json('success');
});


export default router;

まとめ

今回はExpressでのPOSTリクエストのパラメータを取得する方法でした。

まさかbodyParseruseしないといけないとは、ハマりますねこれ。

まだまだここら辺は知見が少ないですが、地道に頑張っていきたいと思います。

コメント