CORSとは何なのか？なんとなくわかるようになるための記事 │ コジマノテック

1. はじめに
2. 同一オリジンポリシー
3. 改めてCORSとはなんだろな
4. CORSの仕組み
5. さいごに

はじめに

コジマです。

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エラー」と言います。