はじめに
NestJSを利用しているプロジェクトでちょっと大きめのサイズ(100kb以上)の画像ファイルをアップロードした際にPayloadTooLargeError: request entity too largeというエラーが発生し、画像をうまく保存できないという問題が発生しました。
知っていればすぐ解決できる問題ですが、知らないと解決までに時間がかかりそうな問題だったので、備忘のために対応内容をまとめます。
解決したい問題
NestJSを利用しているプロジェクトで100kb以上のファイルをPOSTリクエストでアップロードするとPayloadTooLargeError: request entity too largeというエラーが発生し、リクエストがうまくサーバーサイドで処理されない。
エラーログ
error.log
PayloadTooLargeError: request entity too large at readStream (/webpack:/node_modules/raw-body/index.js
// 省略
index.js message: 'request entity too large', expected: 151470, length: 151470, limit: 102400, type: 'entity.too.large'
原因
NestJSが内部的に利用しているexpress(正確にはbody-parser)のデフォルト設定の値が原因でした。
expressはリクエストのパースにbody-parserを利用していますが、body-parserはリクエストボディの最大値は100kbがデフォルト値として設定されています。
そのため、明示的にbody-parserのlimitを設定してやらないと100kb以上のリクエストはエラーとなります。
対処法
明示的にbody-parserのlimitを設定することでエラーなく処理できるようになります。
main.ts
import { NestFactory } from '@nestjs/core';
import * as bodyParser from 'body-parser';
import { AppModule } from './app.module';
async function bootstrap() {
const app: any = await NestFactory.create(AppModule);
app.use(bodyParser.json({limit: '50mb'})); // jsonをパースする際のlimitを設定
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));// urlencodeされたボディをパースする際のlimitを設定
await app.listen(3000);
}
bootstrap();
おわりに
NestJSでもexpressと同様にPOSTで大きめのデータを送信する際はきちんとbody-parserのlimitで受け取れるbodyのサイズを設定しないといけないというのは忘れがちなので、NestJSで実装する際には今後、気をつけようと思います。