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を受け取ってbodyをconsole.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;解決策
ググったら解決することができました。
ExpressでPOSTのパラメータを受け取るには、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;追記(2019/11)
bodyParserのインスタンスをそのままuseしていると警告が発生していましたので、以下の記事を参考に、リクエストのbodyをどの形式でパースしてあげるのかを指定してあげるようにしてください！
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リクエストのパラメータを取得する方法でした。
まさかbodyParserをuseしないといけないとは、ハマりますねこれ。
まだまだここら辺は知見が少ないですが、地道に頑張っていきたいと思います。
コメント