BloomScheme Blog

株式会社ブルームスキーム公式ブログ

ファイルの配信にGCSを使っていてCORB(Cross-Origin Read Blocking)が出たときの対処方法

https://cloud.google.com/images/storage/hero-overview-storage.png?hl=ja

目的

google cloud storage(以下GCS)バケットを新規作成して、そこからファイル参照するとchromeにCORBで怒られてしまう問題を解決します。

どうしてこうなった?

一部のファイルが表示できない。 なんで?
→コンソールにCORBと出ているのを発見。
CORBとは?
Cross-Origin Read Blocking (CORB) - Chrome Platform Status
もしやCORSの問題?GCSのドキュメントを見る
クロスオリジン リソース シェアリング(CORS)  |  Cloud Storage  |  Google Cloud
それっぽい。CORS構成してみる
クロスオリジン リソース シェアリング(CORS)の構成  |  Cloud Storage  |  Google Cloud

やったこと

バケットのCORS構成を確認

gsutil cors get gs://my_bucket_dev
gs://my_bucket_dev/ has no CORS configuration.
CORSの設定されていませんでした。

問題ないバケット

gsutil cors get gs://my_bucket
[{"method": ["*"], "origin": ["*"]}]
CORS設定されていました。 が、この設定は・・・

CORSの設定

cors.jsonを作る
中身は適宜必要なものにすること

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

以下のコマンドでバケットにCORSの設定ができます。
gsutil cors set cors.json gs://my_bucket