前提
現在、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
1// Cloud Functions 2import * as functions from 'firebase-functions' 3 4export const helloWorld = functions 5 .region('asia-northeast1') 6 .https.onCall((data, context) => { 7 return { msg: 'Hello World!' } 8 })
javascript
1// クライアント(Next.js) 2import { getFunctions, httpsCallable } from 'firebase/functions' 3 4const clickSendHandler = useCallback(async () => { 5 const functions = getFunctions() 6 functions.region = 'asia-northeast1' 7 const callFunc = httpsCallable(functions, 'helloWorld') 8 const res = await callFunc() 9 console.log(res) 10}, [])
試したこと
ネット上で調べたところ、関数名のtypoやリージョン違いの件くらいしか見つかりませんでした。
リージョンは明記して合わせてあるのですが。。。
補足情報(FW/ツールのバージョンなど)
クライアント
"firebase": "^9.6.9",
バックエンド
"firebase-admin": "^10.0.2", "firebase-functions": "^3.19.0"

回答1件
あなたの回答
tips
プレビュー