ActiveStorageのDirectUploadでGCSでCORS

GCP上で動かしたらエラーになったのでメモ。

GCSにアップしようとしたら、こんなエラーがでました。

Access to XMLHttpRequest at ‘ https://storage.googleapis.com//<ずらずらとcredentialやexpireの情報>’ from origin ‘ https://hogehoge.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

いくつか設定の仕方があるらしいですがgsutilを使ったやり方でGCSのBucketにCORS対応します。
(AWSみたいにWEBからは設定できないようです)

まずjsonファイルを作ります。

1
2
3
4
5
6
7
8


[
  {
    "origin": ["https://hogehoge.com"],
    "responseHeader": ["Content-Type", "Content-Md5"],
    "method": ["*"],
    "maxAgeSeconds": 3600
  }
]

originは全部許可する場合はアスタリスクでも可です。

1
2
3
4
5
6
7
8


[
  {
    "origin": ["*"],
    "responseHeader": ["Content-Type", "Content-Md5"],
    "method": ["*"],
    "maxAgeSeconds": 3600
  }
]

これを設定します。

1

gsutil cors set <上記作成したjson> gs://<bucket name>

確認

1

gsutil cors get gs://<bucket name>

で通るようになります。