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 リクエストのパラメータを受け取りを試してみました。

ではでは。