jQuery で Ajax する際、同一ドメインなら特に困りませんが、クロスドメインになった途端ハマることが多いのでまとめてみました。

2013/2/28 IE10 も追加してみました

検証ブラウザ

• Chrome バージョン 25.0.1364.99 (MacOS)
• Safari バージョン 6.0.2 (MacOS)
• Firefox バージョン 19.0 (Windows)
• Internet Explorer バージョン 9.0.8112.16421 (Windows)(滅びろ)
• Internet Explorer バージョン 10.0.9200.16521 (Windows)

jsonp と Access-Control-Allow-Origin

ajax + クロスドメイン するには、jsonp を使うのがよく知られている方法ですが、XMLHttpRequest level2 で対応している「Access-Control-Allow-Origin」を使った場合もどうなるか検証してみます。

http → http

普通の http なページから http な他ドメインに ajax する場合です。

例：http://example.com → http://www.example.net

さすがに jsonp は全てのブラウザで利用できます。jquery + json + origin はIE以外使えますが、IEは XMLHttpRequest level2 に非対応なのでNG。代わりにXDomainRequest を使えばIEでも allow origin を使った通信が可能になります。

追記　IE10
XMLHttpRequest level2 に対応したようで allow origin が有効になってます。
恐ろしいのがXDR使うと、allow originなし+jsonpなし で使えちゃいます。いいのこれ？

https → http

https なページから http なページを読み込む場合です。レアケースだと思いますが、クロスドメイン前提だとそれなりに発生しそうな気もします。読み込まれる側を https にするのが一番なんですが、そうも行かないときに。

例：https://secure.example.com → http://www.example.net

Chromeさんがなぜか jsonp でこけます(´・ω・｀)
そしてIE9は、jsonpだと警告が表示されます。XDomainRequest を使うと警告どころか完全にNG、さすがですね。

追記　IE10
jqueryは全滅・・・。XDRで警告表示。
jsonpなら警告表示でした。IE9と変わらず。うーん、使えない(´・ω・｀)

載せてるブラウザで全てで対応出来る方法はないので、IE以外は allow origin + json、IEはjsonp(警告でるけど) と処理を分けるしかないと思います。IEは切るのが一番ですけどね。

参考コード

クライアント側

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">

var url = '読み込むURL。http だったり https だったり';

$(function(){

        // jQuery
        $.ajax({
                type: 'GET',
                dataType: 'json', // json or jsonp
                url: url,
                cache:false,
                success: function(result){
                        alert('jquery ' + result.hello);
                },
                error: function(e){
                        alert('jquery error');
                }
        });

        // IE専用
        if(window.XDomainRequest){
                var xdr = new XDomainRequest();
                xdr.onload = function(){
                        var result = JSON.parse(xdr.responseText);
                        alert('XDR ' + result.hello);
                }
                xdr.onerror = function(){
                        alert('XDR error');
                }
                xdr.open('get', url);
                xdr.send();
        }

});

</script>

サーバ側(PHP)

<?php

$callback = $_GET['callback'];
$json = array(
        'hello' => 'xdomain'
);

header('Access-control-allow-origin: *');
header('Content-type: application/json; charset=UTF-8;');

if($callback){

        echo $callback . '(' . json_encode($json) . ')';
        exit;
}

echo json_encode($json);