【CORS】WebサービスとGoogle Cloud Strageとのファイル送受信時エラー【GCS】

GoogleCloudStrage(以下GCS)のバケットにあるファイルを自作外部サイトからダウンロードしようとしたところ、以下のようなエラーが出た。

Access to XMLHttpRequest at 'https://[GCSのファイル保存先]' from origin 'https://[接続元]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

別のドメイン間のやりとりはCORSによって制限されているため、ダウンロードできないよ、ということらしい。

結論

GCS側のCORS構成に接続元を加える。

手順

1. gsutilツールを手に入れる
2. CORSを構築するためのJSONファイルを作成
3. コマンドラインで構成！

1. gsutilツールを手に入れる

GCSのバケット使ってる方はすでに持っていると思うが、、

2. CORSを構築するためのJSONファイルを作成

以下の内容でJSONファイルを作成。

json

[
    {
      "origin": ["接続元のURL"],
      "method": ["HTTPメソッド"],
      "responseHeader": ["ヘッダー"],
      "maxAgeSeconds": [リクエスト秒数]
    }
]

例

sample.json

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

originは全部許可する場合、アスタリスク

sample.json

"origin" : ["*"],

ヘッダーは検証モード→Networkなどからも確認できる

3. コマンドラインで構成！

$ gsutil cors set <作成したjsonファイル> gs://<bucket name>  

cors getで確認ができる

$ gsutil cors get gs://<bucket name>