3.3 CORS（Cross-Origin Resource Sharing）
クロスオリジンであっても、シンプルなWebリクエストであれば、情報アクセスが可能である。シンプルなリクエストの定義 とは
HTTPメソッドは● GET● HEAD● POST
XMLHttpRequestオブジェクトのsetRequestHeaderメソッドで設定するリクエストヘッダは● Accept● Accept-Language● Content-Language● Content-Type
Content-Type は次のいずれか● application/x-www-form-urlencoded● multipart/form-data● text/plain
上記の条件以外のクロスオリジンのWebリクエストを行う前に、そのリクエストが受け入れられるかどうかを事前にチェックするのが、プリフライトリクエスト です。
CORS仕様では、Webブラウザーを使用して情報をやり取りすることができる定義として、サーバーが新たなHTTP ヘッダーを追加します。
さらに、やり取りの結果、副作用を引き起こす可能性があるHTTPリクエストメソッド (特にGET以外のHTTPメソッドや、特定のMIMEタイプを伴うPOSTの使い方) のために、WebブラウザーがOPTIONSメソッドを用いて、「プリフライト」 (サーバーから対応するメソッドの一覧を収集すること) を行います。

プリフライトリクエストでやり取りするヘッダ
要求の種類
メソッドに対する許可
ヘッダに対する許可
オリジンに対する許可

リクエスト
Access-Control-Request-Method
Access-Control-Request-HeadersOrigin例
Access-Control-Request-Method: POST
Access-Control-Request-Headers: accept, origin, content-type
Origin: http://example.jp

要求の種類
メソッドに対する許可
ヘッダに対する許可
オリジンに対する許可

レスポンス
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Allow-Origin

例
Access-Control-Allow-Methods: GET,POST,OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Origin: http://example.jp

認証情報を含むやり取りでは①認証情報を含むリクエストの許可を設定する（サーバ側）
・Access-Control-Allow-Credentials ヘッダを true に指定します。

②信頼するオリジンに対して、認証情報を含むリクエストを送る場合（クライアント側）
・XMLHttpReqest クラスの、withCredentials プロパティを true に指定します。

33-001 :シンプルなリクエスト【ブラウザ】【サーバ： 33/33-001.html 】【サーバ： 33/33-002.php 】'Content-Type: application/json' は
シンプルなWebリクエストの条件に合わない郵便番号、住所をJSON形式で返すAPI【ブラウザ→サーバ： リクエスト 33/33-001.html → レスポンス 】

【ブラウザ→APIサーバ： リクエスト api.example.net/33/33-002.php → レスポンス 】

JSON形式の郵便番号、住所がレスポンスされている【ブラウザ】↓

サーバからレスポンスは送られているが、クロスオリジン要求をブロックしている。
Access-Contorol-Allow-Origin が足りないので、JSONデータが表示されていない。

33-001a:シンプルなリクエスト(CORS対応)【ブラウザ】【サーバ： 33/33-001a.html 】【サーバ： 33/33-002a.html 】
クロスオリジンからの読み出しを許可【ブラウザ→サーバ： リクエスト 33/33-001a.html → レスポンス 】

【ブラウザ→APIサーバ： リクエスト api.example.net/33/33-002a.html → レスポンス 】

クロスオリジンからの読み出しを許可【ブラウザ】

Access-Control-Allow-Origin: http://example.jp
でクロスオリジンからの読み出しを許可しているのでJSONデータが表示できた。

33-003 :プリフライトリクエストなし【ブラウザ】【サーバ： 33/33-003.html 】【サーバ： 33/33-004.php 】
Content-Type:application/json【ブラウザ→サーバ： リクエスト 33/33-003.html → レスポンス 】

【ブラウザ→APIサーバ： リクエスト api.examle.net/33/33-004.html → レスポンス 】【ブラウザ】

クロスオリジン要求をブロックしました:
同一生成元ポリシーにより、リモートリソースの読み込みは拒否されます(理由: CORS プリフライトチャンネルからの CORS ヘッダー ‘Access-Control-Allow-Headers’にトークン ‘content-type’が足りない)。

33-003a:プリフライトリクエストあり【ブラウザ】【サーバ： 33/33-003a.html 】【サーバ： 33/33-004a.html 】

【ブラウザ→サーバ： GETリクエスト 33/33-003a.html → レスポンス 】

【ブラウザ→APIサーバ： OPTIONSリクエスト api.example.net/33/33-004a.html → レスポンス 】【ブラウザ→APIサーバ： POSTリクエスト api-example.net/33/33-004a.html → レスポンス 】

【ブラウザ】

クロスオリジン要求をブロックしました:
同一生成元ポリシーにより、リモートリソースの読み込みは拒否されます(理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。

33-003a:プリフライトリクエスト（完成）【ブラウザ】【サーバ： 33/33-003b.html 】【サーバ： 33/33-004a.html 】

プリフライトリクエストをやり取り

【ブラウザ→サーバ： GETリクエスト 33/33-003b.html → レスポンス 】

【ブラウザ→APIサーバ： OPTIONSリクエスト api.example.net/33/33-004b.html → レスポンス 】

【ブラウザ→APIサーバ： POSTリクエスト api.examlpe.net/33/33-004b.html → レスポンス 】【ブラウザ】

33-005 :アクセスカウンタ（withCredentialsなし）【ブラウザ】【サーバ： 33/33-005.html 】【サーバ： 33/33-006.php 】

【ブラウザ→サーバ： リクエスト 33/33-005.html → レスポンス 】

【ブラウザ→APIサーバ： リクエスト api.example.net/33/33-006.php → レスポンス 】【ブラウザ】

さらにもう一回クリック【ブラウザ→APIサーバ： リクエスト api.example.net/33/33-006.php → レスポンス 】

cookie がセットされていない
cookie がセットされていないので、カウントがアップされない【ブラウザ】

カウントアップされない33-005a:アクセスカウンタ（withCredentialsあり）【ブラウザ】【サーバ： 33/33-005a.php 】【サーバ： 33/33-006.php 】

【ブラウザ→サーバ： リクエスト 33/33-005a.php → レスポンス 】

【ブラウザ→APIサーバ： リクエスト api.example.net/33/33-006.php → レスポンス 】【ブラウザ】

33-005b:アクセスカウンタ（Access-Control-Allow-Credentialsあり）【ブラウザ】【サーバ： 33/33-005b.php 】【サーバ： 33/33-006b.php 】

【ブラウザ→サーバ： リクエスト 33/33-005b.php → レスポンス 】

【ブラウザ→APIサーバ： リクエスト api.examlple.net/33/33-006b.php → レスポンス 】

Access-Control-Allow-Credentials ヘッダを true に指定【ブラウザ】

カウントアップされた