axiosからCloud Functionsにパラメータ付きのリクエストを送って関数を実行する方法

FirebaseのCloud Functionsで作成した関数を、Vue.jsで作成したWebアプリからaxiosを使ってパラメータ付きのリクエストで呼び出す方法です。

呼び出される側のCloud Functionsの関数は以下の通りとします。

const functions = require('firebase-functions');

exports.sendMail = functions
  .https.onRequest((req, res) => {

    res.set('Access-Control-Allow-Origin', '*');

    if (req.method === 'OPTIONS') {
        // Send response to OPTIONS requests
        res.set('Access-Control-Allow-Methods', 'GET');
        res.set('Access-Control-Allow-Headers', 'Content-Type');
        res.set('Access-Control-Max-Age', '3600');
        res.status(204).send('');
    } else {
        console.log('param1', req.query.param1)
        console.log('param2', req.query.param2)
        console.log('param3', req.query.param3)

        console.log('name', req.body.name)
        console.log('subject', req.body.subject)
        console.log('message', req.body.message)

        res.send('success');
    }
})

Access-Control-Allow-Origin や リクエストの種類が OPTIONS だった場合の処理はCORSの設定で、異なるドメインから呼び出される際に必要な対応になります。

CORSの対応をしていない場合、以下のようなエラーが発生します。

Access to XMLHttpRequest at 'https://xxx-yyy.cloudfunctions.net/zzz' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

axiosで呼び出すリクエストは以下の通りとします。

axios.post('https://xxx-yyy.cloudfunctions.net/zzz?param1=AAA&param2=BBB&param3=CCC', {
  name: 'あああ',
  subject: 'いいい',
  message: 'ううう'
})
.then(response => {
  console.log(response.data)
  console.log(response.status)
}).catch(error => {
  console.error(error)
})

param1、param2、param3がクエリストリング、name、subject、messageがJSON形式で送信するパラメータになります。

リクエスト先のURLはCloud Functionsに作成した関数のURLに置き換えてください。

上記のリクエストを実行して、Firebaseのログを確認すると以下のように出力されます。

• HTTP 関数 | Google Cloud Functions に関するドキュメント
• OPTIONS - HTTP | MDN
• axiosのパラメータ指定方法まとめ - Qiita