くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt3 > セキュリティを無効化したChromeをMacOSで立ち上げる(CORS問題の回避)

セキュリティを無効化したChromeをMacOSで立ち上げる(CORS問題の回避)

Nuxt3 Firebase CloudFunction Firebase Emulator Suite

Nuxt3+Firebase Local Emulator Suiteで開発してると、
Firebase FunctionsのCallable関数でCORSエラーが。。
(Nuxt2のころだと問題なかった気がするけど、)

いろいろ試してみたけど、うまく行かなかったので、
開発中はセキュリティを無効化したChromeで動作確認するようにした(*´ω｀*)

オプションを付けて起動する

$ open -na "Google Chrome" --args --user-data-dir=/tmp/dev_chrome_profile --disable-web-security
$ open -na Chromium --args --user-data-dir=/tmp/dev_chromium_profile --disable-web-security

--disable-web-securityをつけるとCORSエラーなどが発生しない。
--user-data-dirを指定してプロファイルと普段とは違う場所を指定しておく。

おまけ: vite.server.proxy

viteのproxy設定を試してみたけどだめだった。。(それはそう)

・サーバオプション | Vite

おまけ: HTTP関数ならレスポンスヘッダをつければOK

HTTP関数ならレスポンスヘッダをつければOK

・HTTP リクエスト経由で関数を呼び出す  |  Cloud Functions for Firebase
・FirebaseのCloud FunctionsでCORSが~とかAccess-Control-Allow-Originが~と言われたらこれ - Qiita

おまけ: 呼び出し可能関数を本番でも公開状態にする

呼び出し可能関数は、いつのまにか認証が必要になったっぽい。
公開が必要な場合は、GCP Consoleから対象の関数に権限を設定すればOK

  • 新しいメンバー ... allUsers
  • ロール ... Cloud Functions 起動元

・アプリから関数を呼び出す  |  Cloud Functions for Firebase
・IAM を使用したアクセスの承認  |  Google Cloud Functions に関するドキュメント
・Firebase Functions [onCall]を使った関数でCORSが発生してしまう - Qiita

以上!! 地味に変わっててびっくり。。(*´ω｀*)

参考にしたサイト様