Zenn
Open6

firebase hostingからfirebse functionsを呼び出すときのCORS対応

Firebase
PenginNekoPenginNeko

firebase hosting と firebse functions でドメインが異なるためCORSが発生する

express では、routeに対する処理を下記の様に記述できる

app.get('/login', async (req, res) => {})

firebse functions では、functions.https.onRequestを使用して下記になる。

export const login= functions.https.onRequest((req, res) => {} )

さらに、高級な書き方として下記がある

export const login= functions.https.onCall((data, context) => {})
PenginNekoPenginNeko

functions.https.onCall((data, context) => {}) では、application/json においてのrequestのparameter は、data をkeyとして送る必要がある

{
  "data": {
    "name": "steve vai"
  }
}
PenginNekoPenginNeko

functions.https.onCall((data, context) => {}) では、CORSに対応するための特別な記述を加える必要がない

PenginNekoPenginNeko

そもそもaxiosで呼ばなくてもSDK経由で楽に呼べる
Call functions from your app

const app = initializeApp({
  projectId: '### CLOUD FUNCTIONS PROJECT ID ###',
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
});
const functions = getFunctions(app);

import { getFunctions, httpsCallable } from "firebase/functions";

const functions = getFunctions();
const addMessage = httpsCallable(functions, 'addMessage');
addMessage({ text: messageText })
  .then((result) => {
    // Read result of the Cloud Function.
    /** @type {any} */
    const data = result.data;
    const sanitizedMessage = data.text;
  });

ただ、これは使わないな。firebaseに固定されるため。

PenginNekoPenginNeko

全ての場面でonCall関数を使えるかというと、使えない場面もあります。

そんなときは、onRequest関数を使うことになる。
HTTPレスポンスヘッダに下記を設定。

export const login= functions.https.onRequest((req, res) => {
 res.set("Access-Control-Allow-Origin", "*");
 res.set("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST");
 res.set("Access-Control-Allow-Headers", "*");
})

これはゆるゆる設定

詳細は、CORSまとめが詳しい