Axiosを用いたNuxt.jsからExpressへのPostにおいて値がうまく渡せないです

Question

やろうとしていること

フロントエンドにNuxt.js、バックエンドにExpress(Node.js)を用いたWebアプリを開発中です。Nuxt.jsのページからAxiosを使ってExpressにデータを送信したいのですが、うまくいかないです。

コード

フォーム(index.vue)

<template>
  <div class="hello">
    <form action>
      <input type="text" placeholder="text" v-model="text" />
      <input type="submit" value="decide" @click="submitClick" />
    </form>
  </div>
</template>

script(index.vue)

<script>
export default {
  data() {
    return {
      text: null,
    };
  },
  methods: {
    submitClick: async function () {
      await this.$axios.$post("/api", { foo: this.text });
      // alert(this.text);
    },
  },
};
</script>

Express側の処理

const express = require('express')
const app = express()
const db = require('../models/index')
app.get('/', (req, res) => {
  // 省略
})
app.post('/', (req, res) => {
  db.sequelize.sync().then(() => db.Reflection.create({
    sentence: req.body.foo
  }))
})
module.exports = {
  path: '/api',
  handler: app
}

現在できていること

• $axios.$postメソッドは反応しています。db.reflection.create()のsentenceを適当な文字列にすれば、フォームを送信した時点で、データがちゃんと作成されます。
• ただ、値の受け渡しが上手く行っていない状態で以下のようなエラーが出ます。

 ERROR  Cannot read property 'foo' of undefined    

  at api\index.js:11:24

何度調べても分からないので、どなたか分かる方がいれば教えていただけると幸いです。

参考ページ

@nuxt/axiosでCRUDする時のアクセス方法とデータの受け取り方【Nuxt + Express】
Nuxt.jsでaxiosの使い方と設定方法を紹介
【Nuxt.js】非同期するなら、$axiosでしょ

Answer 1

こんにちは。
Axios (ブラウザ側) でのPOSTはできていると思うので、Express側で POSTメソッドで渡ってきたBodyを処理できてないからかな？と思います。
json

試していないので、申し訳ないのですが、もし Express 4.x なら、以下を添えると処理できるかもしれません。Axiosでの POST は Content-Type: application/json で送信されていると思うので、以下のような感じでどうでしょうか？

const express = require('express')
const app = express()

// ここを追加
app.use(express.json())

参考

Express 4.x API リファレンス
https://expressjs.com/ja/api.html

req.body

Contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated when you use body-parsing middleware such as express.json() or express.urlencoded().
The following example shows how to use body-parsing middleware to populate req.body.

あるいは、Express のバージョン次第かと思うのですが、よくあるのが body-parser を使う方法です。

Comments

[eiradino2]

うわああああああああ出来ました！！
昨日ずっと悩んでたので本当にありがたいです！！
教えていただいたリファレンスのページも熟読しておきます！ゞ

[suama]

よかったです！