2010-10-16

XMLHttpRequest Level 2 時代のクロスドメインリクエスト Proxy

XMLHttpRequest Level 2では、XMLHttpRequest が Same Origin Policy を満たさなくても通信できるようにするための仕組みが追加されています。

その仕組みとは、通信相手のサーバーが HTTP レスポンスヘッダ中でクロスドメインアクセスを許可することを示す、Access-Control-Allow-Origin というヘッダを出力するというものです。このヘッダだけ出力した場合は GET リクエストによるクロスドメインアクセスが対象になります。

この拡張された XMLHttpRequest の機能をもっと活用するために、Google App Engine 上で動く GET で取れる範囲でレスポンスヘッダに Access-Control-Allow-Origin: * (すべて許可) をことごとく追加して返す Proxy を開発してみました。

使い方は http://allow-any-origin.appspot.com/http://www.google.co.jp/ のように後ろにくっつけてリクエストするだけです。

デモ

function xhrdemo() {
    var url = document.getElementById("xhrdemo-url").value;
    var req = window.XDomainRequest ? new XDomainRequest() : new XMLHttpRequest();
    req.open("GET", "http://allow-any-origin.appspot.com/" + url, true);
    req.onload = function (event) {
        alert(req.responseText);
        req = null;
    }
    req.send(null);
}



リンク
allow-any-origin.appspot.com
404 Blog Not Found:Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin
NetAgent Official Blog : IE8+jQueryによるクロスドメイン通信とXDomainRequestラッパーの作成 - この Proxy をご紹介いただきました