こんばんはエンジニアの眠れない夜です。
Cloud Storageにアップロードしたファイルにクロスドメインでアクセスできない事があります。そんな時の解決方法を紹介します。
※ 間違っているところなどありましたらご指摘くださいm(_ _)m
CORS（Cross-Origin Resource Sharing）とは？
オリジン間リソース共有Cross-Origin Resource Sharing (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。
イマイチわかりづらいので言い換えると
「ファイルにアクセスする時に同じドメイン間ではアクセスできるけど、違うドメインにアクセスするときは通常クロスドメインでブロックされるからそれをどうさばくかを設定する仕組み」
という感じでしょうか。なんとなくイメージは伝わりますかね…(^_^;)
ドメインAからドメインBにあるファイルに普通にアクセスするとブロックされるのでそれを
「ドメインAからのアクセスだけはOK」にしようということですね。
Cloud Storageにアップロードしたファイルを全体公開
それでは早速CloudStorageに保存されたファイルにアクセスできるようにアクセス権を変更しましょう。アクセス権の設定には gsutil を使います。
まずは一番雑な方法でファイルを全体公開にしてしまう方法からです。
※ セキュリティー的にNGなファイルはこんな方法で公開してはいけません。どこからアクセスされても問題のないファイルに限ってこの方法が使えます。
このコマンドでファイルが存在するかを確認します。
gsutil ls -l gs://PROJECT_NAME/pathi/to/file
ファイルが確認できたらこのコマンドですべてユーザーに読み取り権限を与えます。
gsutil acl ch -u AllUsers:R gs://MY_BUCKET_NAME/pathi/to/file
雑な設定ですが、ひとまず目的のファイルにアクセスできるようになります。
Cloud StorageでCORS設定
ここからはマジメにCORS設定の方法を紹介します。
cors-json-file.jsonというJSONファイルを作成します。
続いて、作成したファイルに下記のコードを貼り付けて、自分のドメインをoriginに追加します。
ここで指定したドメインからはクロスサイトドメインでもアクセスを受け付けられるようになります。
[
{
"origin": ["https://MY_DOMAIN.com"],
"responseHeader": ["Content-Type"],
"method": ["GET", "HEAD", "DELETE"],
"maxAgeSeconds": 3600
}
]
最後にcors-json-file.jsonをCloudStorageに反映させます。
gsutil cors set cors-json-file.json gs://MY_BUCKET_NAME
設定が反映されているかはこのコマンドで確認します。
gsutil cors get gs://MY_BUCKET_NAME
設定したドメインが表示されていれば設定完了です。
この時点で設定が反映されていない場合は、cors-json-file.jsonの設定に何か誤りがあります。
設定内容を確認したり、ドキュメントを確認して形式を確認しましょう。
※ gsutil cors get で設定内容が確認できても、実際に設定がサーバーに反映されるまでは1時間ほどかかります。しばらく待ってからエラーが消えているかを確認してみてください。
まとめ
- CORS設定は異なるドメイン間でファイルをやり取りするための仕組み（アクセス権の設定）
- CORS設定を書いたJSONファイルを作ってその中にアクセスを許可したいドメインを記入
gsutil cors set cors-json-file.json gs://MY_BUCKET_NAMEで設定をCloudStorageに反映させるgsutil cors get gs://MY_BUCKET_NAMEで確認して完成
今までバックエンド中心の開発をしていたのでクロスドメイン？CORS？という状態だったので今理解している範囲でまとめてみました。これが誰かのお役に立てれば幸いです。
間違っているところなどありましたらご指摘いただけると嬉しいです。
[…] Cloud Storage:アクセス権の変更とCORS設定 […]