【Firebase/Functions】「onCall」使ってるのにCORSエラー？

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' }
>]

この２行を追加してあげてください。
それで直ります。

Angularでない人は、

「functions.region(‘asia-northeast1’).httpsCallable(‘getDate’);」

としてあげると良いみたいです（試してないですが）。