はじめに
コジマです。
APIとか触ってるとCORSエラーに出くわすことがあると思います。
CORSってなんだよ。。
Cross-Origin Resource Sharing？リジン間リソース共有？
むっず！
って思った人が読む記事です。
私自身CORSの理解に苦しんだので、なるべく噛み砕いていきたいと思います。
※本記事は正確でない表現をそれなりに含みます。正確さよりイメージの掴みやすさに重きを置いていることを認識頂いた上で読み進めていただけたら幸いです。
同一オリジンポリシー
まず、押さえておきたいのが、同一オリジンポリシーです。
同一オリジンポリシーというのは、同じ環境からの通信だけ許可するよな決め事のことです。
- 同じプロトコル(httpとかhttpsとか)
- 同じポート(80とか443とか)
- 同じホスト(http://sample.co.jp の太字のとこ)
を満たすことを言います。
同一オリジンポリシーかどうかを表にまとめたもの(MDNから引用)を貼っておきます。
| URL | 結果 | 理由 |
|---|---|---|
http://store.company.com/dir2/other.html |
同一オリジン | パスだけが異なる |
http://store.company.com/dir/inner/another.html |
同一オリジン | パスだけが異なる |
https://store.company.com/page.html |
不一致 | プロトコルが異なる |
http://store.company.com:81/dir/page.html |
不一致 | ポート番号が異なる (http:// は既定で80番ポート) |
http://news.company.com/dir/page.html |
不一致 | ホストが異なる |
引用元：https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy
イメージとしてはこんな感じです。
違う環境からの通信は遮断するから安全！
ところがどっこい通信が制限されちゃってめっちゃ不便！
他の環境の通信も許可したいよ～～
ってときに登場するのがCORSです。
改めてCORSとはなんだろな
CORS(Cross-Origin Resource Sharing)というのは
オリジンをまたいだリソースへのアクセスを許可することができる仕組みのことを言います。
超砕いて言うと、違う環境への通信をできるようにする仕組みのことを言います。
CORSの仕組み
ざっくり仕組みを説明します。
サーバーで「Access-Control-Allow-Origin」などのCORSヘッダーを定義し、どの通信を許可するかの設定を行います。
（「Access-Control-Allow-Origin」は電話帳のようなものです。通信を許可するホストのリストになります。）
ブラウザではプリフライトリクエスト(Preflight request)というリクエストを発行し、通信可否を確認します。
サーバーがプリフライトリクエストを許可したときに通信が行われます。
イメージとしてはこんな感じです。
NGのときにはプリフライトリクエストで拒否されます。
こうなったときを俗に「CORSエラー」と言います。
通信メソッドやら単純リクエストやらほかにも考えることはあるけど、この記事ではこの辺で。
さいごに
MDNにCORS関連のドキュメント色々あるので理解を深めたいときに見てみるとよいです。
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy
https://developer.mozilla.org/ja/docs/Glossary/CORS
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
- CORSのおかげで違う環境と通信できるよ
- CORSヘッダーに許可する内容を設定するよ
- プリフライトリクエストで通信できるか確認するよ
- プリフライトリクエストが拒否されるとCORSエラーになるよ
ちなみにCORSの読み方はコルスとかシーオーアールエスとかあるみたいですが、海外の人は「コゥス」と呼んでるので多分これが正しいです。
ソースコードレベルの話だとこの動画とても分かりやすかったのでぜひご覧になってください。
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
以上、コジマでした。
