前回、Google Cloud Storage(GCS)の署名付きURLを作成して、Webサービスから直接アップロードできないか検証していたのですが、GCSにCORSの設定をしてあげないとだめでした。

手順

公式にドキュメントがあったのでそのままです。

クロスオリジン リソース シェアリング（CORS）の設定 | Cloud Storage ドキュメント | Google Cloud
https://cloud.google.com/storage/docs/configuring-cors?hl=ja

バケットの CORS 構成を設定するには、受け入れられるリクエストのタイプを識別する情報（HTTP メソッドや発信元のドメインなど）を指定します。バケットの CORS 構成の設定には、gsutil コマンドライン ツール、XML API、JSON API、Cloud Storage のクライアント ライブラリを使用します。 

> touch cors_setting.json

cors_setting.json

[
    {
      "origin": ["http://example.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

CORSを設定する

> gsutil cors set cors_setting.json gs://[バケット名]

CORSを確認する

> gsutil cors get gs://[バケット名]

参考

クロスオリジン リソース シェアリング（CORS）の設定 | Cloud Storage ドキュメント | Google Cloud
https://cloud.google.com/storage/docs/configuring-cors?hl=ja

FirebaseのHostingとCloud Functionsを利用してStorageからファイルをダウンロードするデモアプリケーション – Qiita
https://qiita.com/rubytomato@github/items/31c6098eb9804d9547ed#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D-1

元記事はこちら

「Google Cloud StrageのバケットにCORS設定をする方法」