Nuxt.jsで，axiosモジュールが本番だと404エラーになる

今回，ログイン機能の実装でaxiosモジュールを使おうと思っています．
開発環境では問題なくRestAPI通信ができたのですが，

herokuへデプロイをして送信しても
404エラーが出てしまいます

err
1https://groupdiscussion.herokuapp.com/middle/login 404 (Not Found)

本番環境で動かないパターンはaxiosモジュールでは多々あるらしく，dotenvを使って
本番環境でのパスをURLとして指定するという方法を取って，errを見てもパスが間違っていることはありませんでした．
こちらを参照しました．

クライアントサイドでは，下のようにaxiosで通信をしています

js
1async submit() {
2      await this.$axios({
3        method: "post",
4        url: "/middle/login",
5        data: {
6          mail: this.mail,
7          password: this.password,
8        },
9      })
10        .then((res) => {
11          this.snacktext1 = "ログインに成功しました";
12          this.snackbar = true;
13          this.$store.commit("form_id", this.mail);
14        })
15        .catch((err) => {
16          this.snacktext1 = "ログインに失敗しました";
17          this.snacktext2 = "もう一度お試しください";
18          this.snackbar = true;
19        });
20    },

node.js側では,expressで

js
1app.post("/login", (req, res) => {
2  console.log(req.body);
3  res.end("true");
4  // let stats = new Sendgrid();
5  // stats.send(req.body);
6});
7