ブラウザのセキュリティ機能として同一オリジンポリシー（Same Origin Policy）が用意されているが、その制限を超えてサイト間でデータをやり取りしたい際に使われる仕様がCORS（Cross-Origin Resource Sharing）！

そもそも同一オリジンポリシーってなんぞ？

JSなどを使用してサイト間のアクセスを禁止するセキュリティ上の制限のこと。

なんで同一オリジンポリシーは必要なん？

• XSSを防ぐため
  • 悪意あるスクリプトが別オリジンのサイトにアクセスしたり操作したりするのを防ぐ
• CSRFを防ぐため
  • ユーザがログインしているサービスに対して、ユーザの意図しない行動（SNSでの投稿、送金など）を実行するリクエストの送信を防ぐ

CORSによるアクセス制御シナリオの例で以下を紹介する

• 単純リクエスト
• プリフライトリクエスト

単純リクエスト

単純リクエストは相手側の許なしにリクエストを送信することができる。
以下の条件を満たすリクエストが単純リクエストとなる。

参照：オリジン間リソース共有（CORS）

• 許可されているメソッドのうちいずれかであること
  • GET
  • HEAD
  • POST
• ユーザエージェントにより自動的に付与されるヘッダーを除いて、手動で設定できるリクエストヘッダが以下のいずれかであること
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • Range
• Content-Typeヘッダは以下のいずれかであること
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

レスポンスにAccess-Control-Allow-Originヘッダを追加するとそのリソースがどのオリジンからアクセスできるか制御できる。*にすることで全てのドメインからアクセスできる状態となる。

プリフライトリクエスト

単純なリクエストの条件を満たさない場合は、ブラウザはOPTIONメソッドによるリクエストを送信して、実際のリクエストを送信しても安全かどうかを確かめる。

プリフライトリクエストでやり取りするヘッダは以下のようになっている。

リクエスト	レスポンス
Access-Control-Request	Access-Control-Allow-Methods
Access-Control-Request-Headers	Access-Control-Allow-Headers
Origin	Access-Control-Allow-Origin