Firebase Storageで発生するCORSエラーの思わぬ解決

はじめに

Next.jsのwebアプリでFirebase Storageを使って画像をアップロードしたい場面ばあった。
しかし以下のエラーでなかなか進むまず、、、

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/firebase-project-id.appspot.com/o?name=images%2FLINE_ALBUM_20240922_250130_1.jpg' from origin 'https://firebase-project-id.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.Understand this errorAI

72-b3b81bb66fbf8efa.js:2 
 POST https://firebasestorage.googleapis.com/v0/b/firebase-project-id.appspot.com/o?name=images%2FLINE_ALBUM_20240922_250130_1.jpg net::ERR_FAILED

※firebase-project-idは実際のプロジェクト名

エラーメッセージを翻訳したり検索にかけてみると、どうやらこの問題だと予想はついた。

Firebase Storage のバケット側で CORS（クロスオリジンリソースシェアリング）の設定が正しく行われていないために発生しているようです。
では設定を追加していきましょう。

CORS 設定ファイルの作成

プロジェクトのルートディレクトリ（もしくは適当な場所）に、cors.jsonというファイルを作成し、以下の内容を記述。

cros.json

[
  {
    "origin": ["*"],
    "method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    "maxAgeSeconds": 3600
  }
]

gsutil を使って CORS 設定を適用

Firebase Storage のバケットに対して CORS 設定を適用するために、Google Cloud SDK に含まれるgsutilコマンドを使用します。

gsutilをインストール

$ python --version                                         
Python 3.10.0

Pythonがインストールされていることを確認して

自身の環境にあったものをダウンロード。

私の場合/Users/user_name/development/google-cloud-sdkに保存

gsutilコマンドとgcloudコマンドを使えるようにする

.zshrcを開いてパスを通します。

.zshrc

export PATH="$PATH:/Users/user_name/development/google-cloud-sdk/bin"

設定を反映させる

$ source ~/.zshrc     

これでgsutilコマンドが使えていたらOK！！

gsutil version                                                        (git)-[master]
/Users/gento/development/google-cloud-sdk/platform/gsutil/third_party/urllib3/src/urllib3/__init__.py:35: NotOpenSSLWarning: urllib3 v2 only supports OpenSSL 1.1.1+, currently the 'ssl' module is compiled with 'LibreSSL 2.8.3'. See: https://github.com/urllib3/urllib3/issues/3020
  warnings.warn(
gsutil version: 5.33

またgcloudコマンドで初回だけ必要？質問に全てyesで回答。

$ gcloud components update

設定ファイルをアップロードするためには認証が必要なのでログイン。

$ gcloud auth login

CORS 設定の適用

先ほど作成したcors.jsonがあるディレクトリで以下を実行

$ gcloud config set project <your-project-id>

プロジェクトをセットする

your-project-idはfirebase consoleのここを見る

$ gsutil cors set cors.json gs://<your-cloud-storage-bucket>

設定ファイル（cors.json）をアップロードする。

your-cloud-storage-bucketはここを見る。

確認

$ gsutil cors get gs://<your-cloud-storage-bucket>
[{"maxAgeSeconds": 3600, "method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"], "origin": ["*"]}]

次はgetで正常にセットできたことが確認できました！

これでいけるか！！！
と思いきやダメでした、、、

なぜだと思ってふと見返してみると、、、

envに設定した値が古いバージョンだった。。。

envに設定したFIREBASE_STRAGE_BUCKETは、何とAIの入力補完のせいでPROJECT_ID.appspot.comになっていました・・。
今はPROJECT_ID.firebasestorage.appです。。！！！

AIの入力補完に騙されていました。常に疑いましょう・・・