Firebase cloud functionsでpostで渡したデータを受け取れない

Question

Vue.jsとVuetifyとFirebaseを使用しております。

cloud functionsの練習でフォームに名前を入力し、ボタンを押したらそれをトリガーとしてcloud functionsのログに入力した名前を表示しようとしているのですが上手くいきません。

Vue.jsのコードとcloud functionsのコードは以下の通りです。
現状ではcloud functionsのログにundefinedと表示されております。
どのようにすれば良いのかご教授いただけると幸いです。

/// Vue ///

<template>

<v-form>

  <v-text-field label="名前" name="onamae" :value="oaname" v-model="onamae"></v-text-field>

  <v-btn @click="send">送信</v-btn>

</v-form>

</template>

<script>
import axios form 'axios'

export default{

  data(){
    return{
      onamae: '',
    }
  },

  methods:{
    send(){
      axios.post('https://asia-northeast1-PROJECT_NAME.cloudfunctions.net/showName', {
        onamae: this.onamae,
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });      
    }
  }

}
</script>

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);

exports.showName = functions.region('asia-northeast1').https.onRequest((req, res) => {

  const onamae = req.body['onamae'];    
  console.log(onamae);

})

Answer 1

どのようにすれば良いのかご教授いただけると幸いです。

サクッと見た感じfunctions側は問題なさそうですねぇ。
とりあえず丸投げは良くないので、問題の切り分け方の一例を紹介します。あとはご自身でやってみてください。

１．ターミナル等を使ってcurlでリクエストしてみる

curl -X POST -H "Content-Type:application/json" https://asia-northeast1-PROJECT_NAME.cloudfunctions.net/showName -d '{"onamae":"hoge"}'

２．functionsのログを確認する
undefinedの場合　→ functions側の問題
hogeの場合 → vue側の問題（リクエストヘッダーやthis.onamaeの中身を確認する）

Comments

[Khy]

ご回答ありがとうございます。
curlでリクエストしてみたところ問題なく値が入っておりました。
ディベロッパーツールで見てみたらデータが渡せていなさそうでした。またstatusもpendingになっておりました。
もう少し調べてみます、ヒントを頂きありがとうございました！