マイコン温度通知システムの製作19 Cloud Functionを使ったデータ取得のクライアント側で表示エラー

Cloud Functionを使い、APIキーがユーザー側に見えないようにデータを渡すようにコードを修正したところ、以下のようなエラーが発生しました。

・ブラウザ表示

Access to fetch at 'https://us-central1-XXX.cloudfunctions.net/getDatabaseData' from origin 'https://XXX.web.app' has been blocked by CORS policy: 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.
us-central1-XXX.cloudfunctions.net/getDatabaseData:1

ChatGPTの回答は以下

このエラーは、CORS(Cross-Origin Resource Sharing)ポリシーに違反しているために発生しています。CORSポリシーは、異なるオリジン(ドメイン、プロトコル、ポート)からのリクエストを制御するセキュリティ仕組みです。このポリシーによって、特定のオリジンからのリクエストが許可されたリソースにのみアクセスできるようになっています。

バックエンドのCloud Functionsは、Firebaseのデプロイメントにおいて異なるオリジンからのリクエストを受け付けるため、CORSの設定が必要です。

解決策としては、Cloud FunctionsのコードにCORSヘッダーを追加することが挙げられます。以下はその方法です:

とありましたが、ここら辺は原因が不明だったので一旦飛ばすことにしました。

 

タイトルとURLをコピーしました