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

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

```console
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`は実際のプロジェクト名

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

https://zenn.dev/taizo_pro/articles/b968ebbf0ed42d

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

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

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

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

## gsutilをインストール

https://cloud.google.com/storage/docs/gsutil_install?hl=ja

```console
$ python --version                                         
Python 3.10.0
```


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

![Screenshot 2025-02-11 at 14.41.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/ef799b30-75fe-a650-5850-994e2b0e9634.png)

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

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

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

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

```zsh:.zshrc
export PATH="$PATH:/Users/user_name/development/google-cloud-sdk/bin"
```

設定を反映させる

```console
$ source ~/.zshrc     
```

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

```console
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で回答。

```console
$ gcloud components update
```

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

```console
$ gcloud auth login
```

## CORS 設定の適用
先ほど作成した`cors.json`があるディレクトリで以下を実行

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

### プロジェクトをセットする
`your-project-id`はfirebase consoleのここを見る
![Screenshot 2025-02-11 at 15.04.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/56361876-112a-a03e-be51-2eaef735937f.png)

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

### 設定ファイル（cors.json）をアップロードする。
`your-cloud-storage-bucket`はここを見る。

![Screenshot 2025-02-11 at 15.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/02c91149-4ffd-ec18-5802-8b76f7091bdb.png)

### 確認

```console
$ 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`です。。！！！:frowning2:

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

https://firebase.google.com/docs/storage/faqs-storage-changes-announced-sept-2024?hl=ja#default-bucket-name-change