Ajaxでクロスドメイン通信
Ajaxでクロスドメイン通信について調べたのでまとめ。
シンプルな例
client
var xhr = new XMLHttpRequest();
var url = 'http://example.com/xhr-response.php';
xhr.open('GET', url, true);
xhr.send();
server
<?php
header('Access-Control-Allow-Origin: *');
echo "ok";
Access-Control-Allow-Origin: *を付けてレスポンスすると、エラーにならず結果を受け取れる。
クッキー付きの送信
client
var xhr = new XMLHttpRequest();
var url = 'http://example.com/xhr-response.php';
xhr.withCredentials = true;
xhr.open('GET', url, true);
xhr.send();
xhr.withCredentials = true;をつけることで、クッキー付きで送信される。
sever
<?php
header('Access-Control-Allow-Origin: ' . getenv('HTTP_ORIGIN'));
header('Access-Control-Allow-Credentials: true');
echo "ok";
Access-Control-Allow-Credentials: trueをつけ、
かつAccess-Control-Allow-OriginにはHTTPヘッダーのOriginをつける。
このOriginは、クロスドメインの通信の場合自動的に付与されて送られてくる。
対応ブラウザ
IE以外はok。
IE8,9はXMLHttpRequestではなく、XDomainRequest を使うことで対応可能。
IE6,7はいつも通り動きません。
GET以外
POSTリクエストやPUTリクエストなどは、あらかじめOPTIONSリクエストで許可をもらわないといけない。
client
OPTIONS Origin: http://example.com Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER
server
Access-Control-Allow-Origin: http://example.com Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER Access-Control-Max-Age: 3600
再度、あらためてPOSTを送る。
