【Ajax】通信メソッドが勝手にOPTIONSになったら

以下のような条件でAjax通信を行うと、ブラウザは自動的に「プリフライト」と呼ばれる通信チェックを行います。

・クロスドメインである
・独自にリクエストヘッダを追加している

1 2	・クロスドメインである・独自にリクエストヘッダを追加している

プリフライトは通信メソッド「OPTIONS」でサーバーに通信を行い、

・クロスドメインのアクセスが許可されているか
・追加したリクエストヘッダが許可されているか

1 2	・クロスドメインのアクセスが許可されているか・追加したリクエストヘッダが許可されているか

をチェックします。
このチェックをパスしなかった場合はそこで処理は終了し、本来のGETやPOSTの通信が行われませんので

「あれ、POSTしたのになんでOPTIONSになってるんだ？」

と混乱してしまいますよね。

ちなみにサーバー側でクロスドメインを許可するには
レスポンスヘッダにAccess-Control-Allow-Originを設定し、許可するドメインを指定します。
PHPの場合ですべてのドメインを許可するなら

header('Access-Control-Allow-Origin: *');

1	header('Access-Control-Allow-Origin: *');

のようになります。

また、独自のリクエストヘッダを許可するには
レスポンスヘッダにAccess-Control-Allow-Headersを設定し、許可するヘッダを指定します。

header('Access-Control-Allow-Headers: '
  . 'Origin, '
  . 'X-Requested-With, '
  . 'Content-Type, '
  . 'Accept, '
  . '(独自のヘッダ1), '
  . '(独自のヘッダ2), '
  . '(独自のヘッダ3), '
);

header('Access-Control-Allow-Headers: '

. 'Origin, '

. 'X-Requested-With, '

. 'Content-Type, '

. 'Accept, '

. '(独自のヘッダ1), '

. '(独自のヘッダ2), '

. '(独自のヘッダ3), '

);

こんな感じです。

関連記事