目次
CORSを理解するための前提知識
オリジン
例えば、http://example.com:80/index.htmlというサイトのページがあったとします。
このURLのうち、
http:// → スキーム
example.com → ホスト
:80 → ポート
という名前が付いています。
この、スキーム、ホスト、ポートをまとめて、オリジンと言います。
同一オリジンポリシー
CORSについて調べていると、必ず同一オリジンポリシーという言葉を目にします。
簡単にいうと、
ウェブブラウザの仕組みとして、あるページを開いた時に、同一のオリジンからしかレスポンスを取得しないよ！
つまり、http://example.com:80/index.htmlというサイトのページを開こうとした際、
http://example.com:80/が先頭についているリクエストでないと、データを取得できない、ということです。
だから、サーバーサイドをAPIとして構築している時などによく直面すると思います。
（フロントとバックでオリジン（URL）が異なるから。）
補足：
同一オリジンポリシーとは、1995年Netscape社によって、JavaScriptと同時にウェブブラウザに導入されたセキュリティ上の考え方であり、ブラウザに備わっている機能。
参考：Wikipedia
同一オリジンポリシーの制限を受けるwebAPI
以下の４項目は、同一オリジンポリシーの制限を受けるので、オリジンが一致しないと通信できません。
つまり、エラーとして処理されます。
・XMLHttpRequest
・Canvas
・Web Storage
・X-Frame-Options
参考：同一オリジンポリシー
XMLHttpRequest
XMLHttpRequestとは、ブラウザ上に備わっているAPIであり、ブラウザ上でサーバーとHTTP通信を行うためのAPIです。
XMLとついていますが、テキスト形式やDOM形式でレスポンスを受け取ります。
同一オリジンポリシーの制限を受けないもの
・<script>によるJavaScript
・<link>によるCSS
・<img><audio><video>によるメディアファイル
・<@font-face>で指定されたフォント
・<object><embed><applet>で指定されたプラグイン
・<frame><iframe>
参考：同一オリジンポリシー
CORSとは？
前提知識が多かったですが、CORSについて説明していきます。ここまでの知識を理解していれば、難しいことはないと思います。
CORS（Cross-Origin-Request-Sharing）とは、
別のオリジンのリソースへのアクセスできる手法・ルールのこと。
どうやって許可しているのか？
Access-Controll-Allow-Origin
リクエストを受け取ったサーバーサイドでは、レスポンスの際に、
「このサイト（ドメイン）からのアクセスを許可しましたよ〜」
っていう証拠のために、response headersにAccess-Controll-Allow-Originにドメイン名を付与して返します。
これがないと、レスポンスを受け取るクライアント側のJavaScriptは、失敗した、と判断します。
