社会人から始めたプログラミング

プログラミング、エンジニアに関することでの備忘録、シェアしたい情報などを共有するためのブログです。

cloud functions for firebase にて呼び出ししたときに CORS error する3つのパターン

エラー内容

Access to fetch at 'xxx' from origin 'yyy' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

可能性のある原因

1) firebase の functions のエラーログを確認。timeoutしていたり、clashしていると起きる 2) functions.https.onRequest を使っているのにcorsの設定していない 3) 謎の見えない文字がfunctionsにあるとなぜか動かないfunctionsがあるみたいなこともある(稀) それ以外もおそらくあると思うが…

解決方法

今回は1)だったので、エラーログを確認して、エラーが起きている箇所を修正。

2) のときは functions.https.onCall((data, context) にすると◎だったりする。 参照↓↓

https://firebase.google.com/docs/functions/callable

javascript - Firebase Cloud Functions: Difference between onRequest and onCall - Stack Overflow

3) のときは怪しい箇所以外をどんどん削除していって、動く箇所と動かない箇所を区別したあと、新しく書き直す。怪しい箇所を含んでコピーしていると、謎の見えない文字も一緒に含まれてしまうので注意。