axiosでpostしたバイナリデータがtoo largeとNodeサーバーにはじかれる

Question

canvasで描画したものをバイナリデータに変換しaxiosでNodeサーバーにpostしようとしています。

document.getElementById("Send").addEventListener("click", function () {
      const base64 = canvas.toDataURL("image/png");
      console.log(base64);

      axios
        .post("/post", {
          pad: base64,
        })
        .then(function (response) {
          console.log(response, 1234);
        })
        .catch(function (error) {
          console.log(error);
        });
    });

サーバー側でtoo　largeのエラーが出ます。

bodyParserの限界値の問題かと思い、50MBの記述をしても変わりません。さすがに送信データはそこまで大きくはないと思います。
何が間違いか、正しい記述を教えていただけないでしょうか。

const path = require('path')
const express = require('express')
const multer = require('multer')
const app = express()
const port = 3000
const bodyParser = require('body-parser');
app.use(bodyParser());
app.use(bodyParser.json({limit: '50mb'})); 
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));


app.use(express.static(path.join(__dirname, 'public')))
app.get('/upload', (req, res) => res.sendFile(path.join(__dirname, 'public/index.html')))

app.post('/post',  (req, res)  => {
  console.log(req.body);
  console.log("postのリクエスト");

  const base64 = req.body.pad.split(',')[1];
  const decode = new Buffer.from(base64,'base64');
  fs.writeFile('test.png', decode, (err) => {
      if(err){
          console.log(err)
      }else{
          console.log('saved');
      }
  });
});



app.listen(port,function(){
	console.log(`Example app listening on port ${port}!`)
})	

Answer 1

原因

おそらくここです。

app.use(bodyParser());
app.use(bodyParser.json({limit: '50mb'})); 
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));

もう適当に上からぶちこんどけみたいになってますね。
これの何が悪いのか解説すると、
Express.jsのミドルウェアは上から順番に全てを処理する仕組みとなっています。

クライアント側のコードを読むと下記のようになっています。

const base64 = canvas.toDataURL("image/png");
axios.post("/post", { pad: base64 })

1文字目からバイナリデータなのでJSONをパースしてくれなんて頼む気ないですよね。
だから下記の2行は/postエンドポイントを叩く瞬間は実行して欲しくないわけです。

app.use(bodyParser());
app.use(bodyParser.json({limit: '50mb'})); 

解決方法

Express.jsでミドルウェアを使う時、app.useメソッドを実行しますが、
この時に省略可能な第一引数が存在します。
参考サイト: ミドルウェアの使用 - Express.jsの日本語ドキュメント

第一引数が文字列ならば、このパスのエンドポイントだけにbodyParserを適用しましょみたいな事が実現可能です。
まさにやりたい事ですね。
今回のExpress.jsのサーバはやりたい事が膨大になってきており、
全てのエンドポイントに対してapp.use(bodyParser系列)を通過させてHTTPリクエストのbodyを解析する行為は非効率的です。

なのでこのエンドポイントだけに適用するみたいな事をしましょう。
質問文のコードを手直しすると下記になります。

const bodyParser = require('body-parser');
// この3行のbodyParserミドルウェアの指定を削除する

// 必要になった箇所だけミドルウェアを適用する
app.use('/post', bodyParser.urlencoded({limit: '50mb', extended: true}));
app.post('/post',  (req, res)  => {
  console.log(req.body);
  console.log("postのリクエスト");

  const base64 = req.body.pad.split(',')[1];
  const decode = new Buffer.from(base64,'base64');
  fs.writeFile('test.png', decode, (err) => {
      if(err){
          console.log(err)
      }else{
          console.log('saved');
      }
  });
});

別の切り口として、app.postなどのメソッドで登録出来るコールバック関数は複数あります。
参考サイト: app.post - Express.js API リファレンス

app.post(path, callback [, callback ...])と記載されており、
[, callback ...]の[]は省略可能、...は1個以上の指定が可能ということを示しています。
つまり、最低1個のコールバック関数の指定が必要だが、上限はなく何個でもコールバック関数を仕込んでも良いということです。

コールバック関数なんて複数要らんやろ？と感じますが、
ドキュメントのArgument(引数)の項目を読むとこの一文が

Callback functions; can be:

• A middleware function.

普通に実行して欲しい関数の前に好きなミドルウェアを仕込むことも可能です。
これを利用して下記のように記述してもいいよということです。

app.post('/post',  bodyParser.urlencoded({limit: '50mb', extended: true}), (req, res)  => {
  console.log(req.body);
  console.log("postのリクエスト");

  const base64 = req.body.pad.split(',')[1];
  const decode = new Buffer.from(base64,'base64');
  fs.writeFile('test.png', decode, (err) => {
      if(err){
          console.log(err)
      }else{
          console.log('saved');
      }
  });
});

Answer 2

app.use(bodyParser());
こちらにvscode表示で取り消し線が入っているのが気になり、試行錯誤しました。

どうもこれが原因でlimit解除ができてなかったようです。
こちらを削除することでpostできるようになりました。

お騒がせしました。