Nuxt.js で POSTリクエストを受け付けたい

タイトルの通り、Nuxt.js で POST リクエストを受け取りたかったのですが、あまり調べる時間が取れずにいました。

本気で調べたら 1 時間くらいで、答えにたどり着いて動作確認まで出来たので、メモしておきます。

目次

参考

前提

以下の実装は、Nuxt.js の環境構築が済んでいることを前提とします。

とりあえず Get リクエストのパラメータの拾い方

Get リクエストのパラメータは、方法で取得できました。

pages/get.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div>{{ hoge }}</div>
</template>
<script lang="ts">
  import Vue from "vue";
  export default Vue.extend({
    asyncData(context) {
      if (!context.query["hoge"]) {
        return { hoge: "" };
      }
      return { hoge: context.query["hoge"] };
    },
  });
</script>

/get?hoge=1234などの URL でのアクセス、フォームのリクエストでhogeパラメータを取得して表示できます。
context.query["パラメータ名"]でパラメータにアクセスできます。

実装 Post リクエストのパラメータの拾い方

Post リクエストのパラメータは、Nuxt.js の標準機能だけでは拾うことができないようです。

参考にしたサイトを基に以下を用意しました。

pages/post.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div>{{ hoge }}</div>
</template>
<script lang="ts">
  import Vue from "vue";
  import qs from "querystring"; //<= querystring を導入する

  export default Vue.extend({
    asyncData(context) {
      //リロードもされる想定で
      if (context.req.method != "POST") {
        return { hoge: "" };
      }
      var body = "";
      var temp = "";
      while ((temp = context.req.read())) {
        body += temp;
      }
      var postParams = qs.parse(body);
      //パラメータが空であることを想定してマージさせる
      return { hoge: "", ...postParams };
    },
  });
</script>

フォームを使って hoge パラメータを持つ POST リクエストを送って確認します。
リロードされる(Get リクエスト)、パラメータを含まないことを想定してリクエストを処理しました。
hoge パラメータに設定した内容を表示できました。

補足

Get リクエスト Post リクエストともにこちらのフォームをページに用意します。
Nuxt.js を起動するサーバーとは別のポートで Web サーバーを起動して、そちらからアクセスし使用しました。

動作確認に使ったフォーム
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
  POST
  <form action="http://localhost:4001/post" method="post">
    <input type="text" name="hoge" />
    <button type="submit">Submit</button>
  </form>
</div>
<div>
  GET
  <form action="http://localhost:4001/get" method="get">
    <input type="text" name="hoge" />
    <button type="submit">Submit</button>
  </form>
</div>

今回は、Nuxt.js への Post リクエストのパラメータを受け取りを試してみました。

ではでは。