読者です 読者をやめる 読者になる 読者になる

webネタ

技術系ブログ。web系SE。1988。♂。@rhong_

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を送る。

参考