More than 3 years have passed since last update.

Firebase Functions [onCall]を使った関数でCORSが発生してしまう

Last updated at 2020-07-31Posted at 2020-03-28

前提

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

server.ts

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を使って定義しています。

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

client.ts

// 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.

訳すと、