前提

Firebase Functionsで、あらかじめ、次のような関数を用意しています。

import * as functions from 'firebase-functions';
import { HttpsError } from 'firebase-functions/lib/providers/https';

export const exampleMethod = functions
  .region('asia-northeast1')
  .https.onCall(async (data, context) => {
    // hogehogeが空白でなければ中身をそのまま返し、空白ならエラーを投げる
    if (data.hogehoge !== '') {
        return {
            hogehoge: data.hogehoge
        }
    } else {
        throw new HttpsError('invalid-argument', 'hogehoge is required.')
    }
  });

Firebase HostingにデプロイしているWebサイトからであれば、誰でも利用できる関数として用意しており、
onCallを使って定義しています。

以上の関数を、クライアント側で、次のように呼び出します。

// firebaseの事前準備のコードは省略

const functions = firebase.app().functions('asia-northeast1');
const exampleMethod = functions.httpsCallable('exampleMethod');

const result = (await exampleMethod({hogehoge: 'さんぷる文字列'})) as any;
console.log(result);

すると、次のようなエラーが出てしましました。

Access to fetch at 'https://asia-northeast1-example.cloudfunctions.net/exampleMethod' from origin 'https://example.firebaseapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

誰もが一度は経験する、CORS、Access-Control-Allow-Originです。

そして、たちが悪いのが、localhostで実行している（Cloud Functions エミュレータを使っている）ときは、エラーが出ず、正常に実行できるのです。

よくあるCORSの原因（今回は違う）

Web上で情報を探すと、よく見かける原因と解決策は以下の通り。

1. onRequestを使っている

Functionsの関数を定義する際に、onCallではなく、onRequestを使っている場合、きちんとセッティングをしないと、CORSにひっかかってしまいます。

しかし、今回はonCallを使っているため該当しません。というか、そもそもCORSを考えなくて済むという点が、onCallのメリットの一つのはず。。。

参考：FirebaseのCloud FunctionsでCORSが~とかAccess-Control-Allow-Originが~と言われたらこれ

2. 関数の内部でエラーが発生している

ログを見ても、特にエラーが出ているようには見えなかった。そもそも、localhostでは正常に実行できている。

3. スペルミス・リージョンの指定間違い

これも今回は該当せず。

解決方法

Google Cloud Functionsのドキュメントに、Managing Access via IAMというものがあり、これによると、

As of January 15, 2020, HTTP functions require authentication by default. You can specify whether a function allows unauthenticated invocation at or after deployment.

訳すと、

2020 年 1 月 15 日以降に作成された新しい HTTP 関数のデフォルトでは、認証が必要になります。デプロイ時またはデプロイ後に関数が未認証の呼び出しを実行できるかどうか指定できます。

だそうです。（日本語版のドキュメントは、更新が遅れているのか、日付が違っていました。）

というわけで、以下の通り、権限を追加してみます。

【1】Google Cloud ConsoleのCloud Functionsのページへ移動

【2】権限を設定したい関数にチェックを入れる

【3】画面右上の「情報パネルを表示」をクリックすると、権限を設定できるパネルが表示されるので、「ADD MEMBER」をクリック

【4】新しいメンバーに「allUsers」を追加し、ロールに「Cloud Functions 起動元」を追加して、「保存」をクリック

【5】「ALLOW PUBLIC ACCESS」をクリック

以上で、権限が追加され、正常に関数が実行できるようになりました。

参考：GitHub firebase/functions-samples : Add Cors to callable function #395

なお、ホスティングされたページ以外から関数にアクセスすると、次のようなレスポンスになる。

{"error":{"message":"Bad Request","status":"INVALID_ARGUMENT"}}

(2020/7/31追記　上記記述は誤りの為、取消)

備考

セキュリティ的に問題がある場合はお教えいただけると幸いです。