この記事は以下の書籍を参考にして執筆しました。
#CORS
異なるオリジンとの通信を可能にする。
##Access-Control-Allow-Origin
クロスオリジンからの読み出しを居するための仕掛け。
アクセスされる側がHTTPレスポンスヘッダとして出力する。
##シンプルなリクエスト
特定の条件を見たすシンプルなリクエストの場合、XMLHttpRequestで異なるオリジンにHTTPリクエストを送ることが許可になしに可能。
http://example.jsからhttp://example.comへのXMLHttptRequestを許可する場合は
http://example.comが以下のようにHTTPレスポンスヘッダを送信する。
Access-Control-Allow-Origin:http://example.js
##プリフライトリクエスト
シンプルナリクエストでないクロスサイトオリジンアクセスでは、ブラウザはプリフライトリクエストというHTTPリクエストを送信する。
このリクエストを受けたサーバは以下のヘッダに応答する必要がある。
| 揚州の種類 | リクエスト | レスポンス |
|---|---|---|
| メソッドに対する許可 | Access-Control-Request-Method | Access-Control-Allow-Method |
| ヘッダに対する許可 | Access-Control-Request-Headers | Access-Control-Allow-Headers |
| オリジンに対する許可 | Orijin | Access-Control-Allow-Orijin |
###プリフライトリクエストの受け取り
if ($_SERVER['REQUEST_METHOD'] === "OPTIONS") {
//プリフライトリクエスト受取時の処理
}elseif ($_SERVER['REQUEST_METHOD'] === "POST") {
//ポスト処理
}
プリフラを受け取って、ヘッダに返答したら次は正常のPOSTが送信されるから条件付を記載する。
その際にheader('Access-Control-Allow-Origin: URL');
を忘れないように。
##認証情報を含むリクエスト
デフォルトではクロスサイトオリジンに対するリクエストにはHTTP認証やクッキーなどの認証に用いられるリクエストヘッダは自動的に動診されない。
XMLHttpRequestのプロパティにwithCredentialsをセットする必要がある。
###withCredentialsをセットする
req.open('GET', URL);
req.withCredentials = true;
withCredentialsをtrueにするとAccess-Control-Allow-Credentials: true'というレスポンスヘッダを返す必要がある。
#まとめ
クッキー等認証用ヘッダを用いるクロスオリジンリクエストは書きを満たす必要がある。
- withCredentialsをtrueにする
- レスポンスヘッダとしてAccess-Control-Allow-Credentials: trueを返す
#参考文献