【図解で解説】CORS（Cross-Origin Resource Sharing）とは
CORSとは
ブラウザとサーバー間の安全なクロスオリジン リクエストとデータ転送をサポートします。
何を言っているか分からないと思うので、CORSを理解するために１つ１つの要素について学んでいきましょう。
オリジンについて
オリジンは、スキーム（プロトコル）やホスト（ドメイン名）、ポートの３つの組み合わせのことです。
オリジンの例
https://google.com
スキーム（プロトコル）：https
ホスト（ドメイン名）：google.com
ポート：80
SOP（Same-Origin Policy）について
SOPとは、Webブラウザに実装されている重要なセキュリティ機構の一つで、異なるオリジン間でのデータアクセスを制限するポリシーです。
悪意のあるウェブサイトがユーザーのデータや情報を不正にアクセスするのを防ぐために設計されています。
上記画像で同じオリジン間でのアクセスを行った例について説明します。
まず、domain-a.comからdomain-a.comに対してリクエストを送る場合は、すべてのリクエストは許可されてレスポンスを返します。
つまり、同一オリジン間での通信については全て許可されます。
次に、異なるオリジン間でのアクセスを行った例について説明します。
domain-a.comからdomain-b.comに対してリクエストを送る場合は、SOPによりアクセスを制限されます。
ただ、CORS（Cross-Origin Resource Sharing）の設定を行うことで、異なるオリジン間でもアクセスができるようになります。
参考：同一生成元ポリシー
CORSの仕組み
異なるオリジン間での通信を許可する場合
今回は、http://localhost:8000からhttp://localhost:9000にリクエストを行う場合について解説します。
引用：CORSを理解する
① クライアント側でクロスオリジン リクエストを行うと、リクエストヘッダーのOriginにリクエスト元のオリジンを設定します。
② そして、サーバー側では異なるオリジン（localhost:8000）からのリクエストを許可するために、レスポンスヘッダのAccess-Control-Allow-Originにlocalhost:8000を設定します。
また、GETやPOST、PUT、DELETEなどの全てのリクエストメソッドを許可するために、Access-Control-Allow-Originに*を設定します。
こうすることで、異なるオリジン間でのリクエストを許可していることになります。
異なるオリジン間での通信を許可しない場合
逆に、localhost:8000からのリクエストを受け付けていない場合についても考えます。
引用：CORSを理解する
① クライアント側でクロスオリジン リクエストを行うと、リクエストヘッダーのOriginにリクエスト元のオリジンを設定します。
② サーバー側ではlocalhost:3000からのリクエストのみ許可しています。リクエスト元のlocalhost:8000を許可していないため、今回の場合だと異なるオリジン間での通信は許可されません。
PUT （GET以外のメソッド） を使用してリクエストを実行した場合
GET以外のメソッドを使用してリクエストを実行する場合、事前フライトをする必要があります。
引用：CORSを理解する
① まず、OPTIONSメソッドのリクエストを実行します。
Origin: localhost:8000で、Access-Control-Request-MethodはPUTです。
Access-Control-Request-Methodには、今回実行したいリクエストメソッドを設定します。
② サーバー側では、Access-Control-Allow-Originにlocalhost:8000を設定しているので、異なるオリジン間での通信を許可しています。
また、Access-Control-Allow-MethodsにPUTが設定されているので、PUTメソッドの実行も許可されています。
よって、本命のリクエストを実行して良いよとレスポンスを返します。
③ クライアントはOrigin: localhost:8000を設定したPUTメソッドを実行します。
④ サーバーはlocalhost:8000のリクエストを許可しているので、レスポンスを返します。
Discussion