CORS：クロスドメインなAjaxでJSON / JSONPの各種ブラウザ対応まとめ

忘れてしまうのでまとめておく。

気をつけること

• 基本的に jsonp であれば動く
• json + モダンブラウザは、Access-Control-Allow-Originを設定すれば動く
• json + IE8,9では、XDomainRequestを使えば動く
• IE6,7は死亡（もういいよね）
• プロトコル(http|https) / FQDN / ポート番号、いずれかが違う場合、クロスドメイン
• BASIC認証があると、別途対応が必要（後述）

JSON編

サーバサイド

jsonを返すサーバ側にAccess-Control-Allow-Originを設定する。

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

    // CakePHPの場合
    $this->header('Access-Control-Allow-Origin: *');
    $this->header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

BASIC認証をしている場合

クレデンシャルを許可するといけるが、Originにワイルドカードは指定できない。

<?php
    header('Access-Control-Allow-Origin: http://example.com');
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization');

クライアントサイド

jQuery版

ajax.js

// IE8,9でXMLHttpRequestの代わりにXDomainRequestを使う
(function( jQuery ) {

if ( window.XDomainRequest ) {
    jQuery.ajaxTransport(function( s ) {
        if ( s.crossDomain && s.async ) {
            if ( s.timeout ) {
                s.xdrTimeout = s.timeout;
                delete s.timeout;
            }
            var xdr;
            return {
                send: function( _, complete ) {
                    function callback( status, statusText, responses, responseHeaders ) {
                        xdr.onload = xdr.onerror = xdr.ontimeout = xdr.onprogress = jQuery.noop;
                        xdr = undefined;
                        complete( status, statusText, responses, responseHeaders );
                    }
                    xdr = new XDomainRequest();
                    xdr.open( s.type, s.url );
                    xdr.onload = function() {
                        callback( 200, "OK", { text: xdr.responseText }, "Content-Type: " + xdr.contentType );
                    };
                    xdr.onerror = function() {
                        callback( 404, "Not Found" );
                    };
                    xdr.onprogress = function() {};
                    if ( s.xdrTimeout ) {
                        xdr.ontimeout = function() {
                            callback( 0, "timeout" );
                        };
                        xdr.timeout = s.xdrTimeout;
                    }
                    xdr.send( ( s.hasContent && s.data ) || null );
                },
                abort: function() {
                    if ( xdr ) {
                        xdr.onerror = jQuery.noop();
                        xdr.abort();
                    }
                }
            };
        }
    });
}
})( jQuery );

jQuery.getJSON('http://example.com/search.json',
    {
        'hoge': 'piyo'
    },
    function (data) {
        console.log(data);
    }
});

参照 : https://github.com/tlianza/ajaxHooks/blob/master/src/ajax/xdr.js

JavaScript版

ajax.js

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

var xhr = createCORSRequest('GET', 'http://example.com/search.json');
if (!xhr) {
    throw new Error('CORS not supported');
}
xhr.onload = function(){};
xhr.onerror = function(){};
xhr.send();

参照 : http://www.html5rocks.com/en/tutorials/cors/

JSONP編

jsonpの場合、サーバサイドではjsonp形式で返すだけで特に設定は必要ない。ただし、jsonと違いJavaScriptのコードをクライアントサイドで直接実行するため、jsonpの提供APIに悪意のあるコードが含まれていた場合は恐ろしいことになる。callbackで指定できるパラメータを制限するなど、ある程度の工夫が必要。

クライアントサイド

jQuery版

ajax.js

jQuery.getJSON('http://example.com/search.json?callback=?',
    {
        'hoge': 'piyo'
    },
    function (data) {
        console.log(data);
    }
});

calback=?とすることで、jQueryが勝手にコールバック名を生成してアクセスしてくれる。

JavaScript版

ajax.js

var target = document.createElement('script');
target.charset = 'utf-8';
target.src = 'http://example.com/search.json?callback=hoge';
document.body.appendChild(target);

function hoge(result) {
    console.log(result);
}