jQuery で Ajax(クロスドメイン) ブラウザ対応まとめ


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
json json + origin jsonp jsonp + origin
chrome ×
Safari ×
Firefox ×
IE9 × ×
IE9 + XDR jQueryを使わず XDomainRequest を使用すれば allow origin が有効になります
IE10 ×
IE10 + XDR XDomainRequest を使うと allow originがなくても使えてしまいました

さすがに 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
json json + origin jsonp jsonp + origin
chrome × × ×
Safari ×
Firefox ×
IE9 × ×
IE9 + XDR XDomainRequest を使っても通信できません。滅びろ
IE10 × ×
IE10 + XDR allow origin有無関係なく、エラー

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);
Tag  

4 Responses to jQuery で Ajax(クロスドメイン) ブラウザ対応まとめ

  1. […] くいきません。 で、調べてみて出てきたのが下記のページでした。 jQuery で Ajax(クロスドメイン) ブラウザ対応まとめ jQueryを使ったAjax通信(クロスドメイン編) – おかひろの雑記 […]

  2. […] ら → てもぐさんのサイト 「jQuery で Ajax(クロスドメイン) ブラウザ対応まとめ」 […]

  3. トーリス・ガリ より:

    同じ様に調べていて、大変参考になりました。
    ありがとうございます。
    IE・・・滅びろ・・・!

  4. マ社め! より:

    参考になります。
    ありがとうございます。

    「XDomainRequest を使っても通信できません。滅びろ」
    ぷっ、吹き出してしまいました。
    わかるぞ~。

コメントを残す

メールアドレスが公開されることはありません。

Top