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

SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

クロスオリジン分離対応を実施

Firebase Emulator Suiteで起動しているFunctionsから本番のFirestoreにアクセスする

functionsのみエミュレータを使うようにするとできる

Firebase Functions呼び出し時に Error: function terminated. が発生した場合

firebase functions:logで詳細を確認できる

Cloud BuildでFirebase Hostingのデプロイを行う

リポジトリへのpush以外をトリガーにしたい場合に使用

JestでFirestoreセキュリティルールのテストを書く

Github ActionsでCIを回せるようになった

Local Emulator Suiteを使ってFirestoreのローカル開発を行う際に初期データ(seeds)を用意する

ローカル管理画面でDeveloperToolsを開くとwindow.firestoreが使える