以下のような条件でAjax通信を行うと、ブラウザは自動的に「プリフライト」と呼ばれる通信チェックを行います。
|
1 2 |
・クロスドメインである ・独自にリクエストヘッダを追加している |
プリフライトは通信メソッド「OPTIONS」でサーバーに通信を行い、
|
1 2 |
・クロスドメインのアクセスが許可されているか ・追加したリクエストヘッダが許可されているか |
をチェックします。
このチェックをパスしなかった場合はそこで処理は終了し、本来のGETやPOSTの通信が行われませんので
「あれ、POSTしたのになんでOPTIONSになってるんだ？」
と混乱してしまいますよね。
ちなみにサーバー側でクロスドメインを許可するには
レスポンスヘッダにAccess-Control-Allow-Originを設定し、許可するドメインを指定します。
PHPの場合ですべてのドメインを許可するなら
|
1 |
header('Access-Control-Allow-Origin: *'); |
のようになります。
また、独自のリクエストヘッダを許可するには
レスポンスヘッダにAccess-Control-Allow-Headersを設定し、許可するヘッダを指定します。
|
1 2 3 4 5 6 7 8 9 |
header('Access-Control-Allow-Headers: ' . 'Origin, ' . 'X-Requested-With, ' . 'Content-Type, ' . 'Accept, ' . '(独自のヘッダ1), ' . '(独自のヘッダ2), ' . '(独自のヘッダ3), ' ); |
こんな感じです。