Firebase便利ですね。
最近は、Angular + Ionic、そしてFirebaseを使ってモバイル向けwebアプリ開発をしています。
今回は、FirebaseのFunctionsについてのお話です。
(自分への備忘録も兼ねて)
概要
firestoreやAuthのトリガーを使わず、関数を直接呼び出す方法として、
「onRequest」と「onCall」が用意されています。
関数をFirebaseアプリ外から呼び出さないのであれば「onCall」を使うのが良さそうでした。
サンプルとして、この様なコードを書いて実験してみました。
Functions側では
exports.getDate = functions .region('asia-northeast1') .https .onCall((data, context) { return { msg: data.sendMsg, date:newDate().getTime() }; });
そして、Angular側のTypeScriptでは
const onCallGetDate = this.functions.httpsCallable('getDate'); const result = await onCallGetSignedUrl({ sendMsg: this.mid }).pipe(first()).toPromise(Promise); console.log(result.msg);
さて。
これを実行するとこの様なエラーが出てしまいました。
エラーについて
Access to fetch at ‘https://us-central1-***************.cloudfunctions.net/getDate’ from origin ‘http://**************’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.
「なぜ?onCallはCORS関係ないはずなのに!!」
自分のサーバーでも、Hostingにデプロイしてみてもダメでした。
さて、(私はこのブログを書くまで気づかなかったのですが)、エラー文にヒントがあります。
「https://us-central1-」の部分です。
今回、リージョンを「asia-northeast1」にしたので、「us-central」というのはおかしいです。
解決方法
簡単です。「app.module.ts」を編集します。
import { AngularFireFunctionsModule, REGION } from '@angular/fire/functions'; ... providers: [ { provide: REGION, useValue: 'asia-northeast1' } >]
この2行を追加してあげてください。
それで直ります。
Angularでない人は、
「functions.region(‘asia-northeast1’).httpsCallable(‘getDate’);」
としてあげると良いみたいです(試してないですが)。
終わりに
Angularはググっても日本語のページが少ないので辛いです…。
以上、趣味プログラマーの記事ではございますが、少しでも参考になれば幸いです!
コメント