前提
現在、firebase SDKからCloud FunctionsのonCallへのリクエストを実装しているのですが、CORS問題が解決できません。
リクエストヘッダーにtokenが設定されているのは確認済みです。
クライアントはloalhostで起動・リクエストしています。
実現したいこと
onCallへのリクエスト成功
発生している問題・エラーメッセージ
Access to fetch at 'https://asia-northeast1-xxxx.cloudfunctions.net/helloWorld' from origin 'http://localhost:3000' 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.
該当のソースコード
javascript
// Cloud Functions import * as functions from 'firebase-functions' export const helloWorld = functions .region('asia-northeast1') .https.onCall((data, context) => { return { msg: 'Hello World!' } })
javascript
// クライアント(Next.js) import { getFunctions, httpsCallable } from 'firebase/functions' const clickSendHandler = useCallback(async () => { const functions = getFunctions() functions.region = 'asia-northeast1' const callFunc = httpsCallable(functions, 'helloWorld') const res = await callFunc() console.log(res) }, [])
試したこと
ネット上で調べたところ、関数名のtypoやリージョン違いの件くらいしか見つかりませんでした。
リージョンは明記して合わせてあるのですが。。。
補足情報(FW/ツールのバージョンなど)
クライアント
"firebase": "^9.6.9",
バックエンド
"firebase-admin": "^10.0.2", "firebase-functions": "^3.19.0"
まだ回答がついていません
会員登録して回答してみよう