Firebase FunctionsでonCallで実装しているにも関わらずCORSエラーが発生した場合

公開日時

Firebase Functionsをデプロイして確認しようとしたところCORSエラーが発生した。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

https.onCallで実装している場合はCORS設定はSDK側で自動で行われるはずなので不可解な現象だ。

複数あるFunctionsのうちの一つだけ上記エラーになっていたのも気になる点。

Firebase Functionsの管理画面を見ても特におかしな点は見当たらなかった。

ふと気になってGCPの管理画面でCloud Functionsのページを確認してみたところ、該当のAPIのみ「未認証を許可」が付与されていないことに気づいた。

firebase gcp

そこで、該当のFunctionを一度削除して、再度Firebase Functionsをデプロイし直したところ、「未認証を許可」が付与され正常にonCallリクエストが呼べるようになった。

実装はじめの頃に firebase deploy --only functions でデプロイを行った際に該当APIでエラーが起きていたのでこれが原因かもしれない。

(その後も何度かデプロイを行っていたがエラーなくデプロイできていたので、実際にAPIを呼び出すまで気づかなかった。)

まとめ

  • onCallでCORSエラーが起きた場合は、Cloud Functions(GCP)の管理画面を確認してみる
  • 「未認証を許可」が付与されていない場合は、一度Functionを削除して再デプロイする

Related #firebase

YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Firebase Extensions

Functionsを実装する際の参考になる

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

CloudFunctionsを使ってFirestoreのサブコレクションを削除する

CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる