XMLHttpRequestでクロスドメインにCookieを送信する

仕事で少し調べたので、その時のメモです。

XMLHttpRequestでクロスドメインにリクエストを送信する時にCookieもリクエストに含めたい場合は以下のように書きます。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://test.com/rest.php', true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        var result = xhr.responseText;
        alert(result);
    }
};

3行目の「withCredentials」プロパティをtrueに設定する必要があります。

【ソースコード詳細】

1行目: var xhr = new XMLHttpRequest();

XMLHttpRequestオブジェクトを作成します。

2行目: xhr.open(‘GET’, ‘http://test.com/rest.php’, true);

openメソッドでリクエストを初期化する。左から順にメソッド(GET、POSTなど)、URL、非同期フラグを指定します。

3行目: xhr.withCredentials = true;

withCredentialsプロパティをtrueにセットする(デフォルトはfalse)。これで、Cookieが送れるようになります。

4行目以降: xhr.onreadystatechange = function() {・・・・・・・

非同期通信にしている場合は、readyState プロパティが変わる毎に呼び出されるonreadystatechangeに匿名関数を代入して、readyStateが4(通信完了)になった時に、APIから取得した文字列(responseText)をalertで表示しています。

※注意※

XMLHttpRequest Level2に対応したブラウザでしか使用できません。IE8、IE9とかでは対応できません。

ブラウザごとの対応状況を調べるにこちらの記事↓

HTML5やCSS3のブラウザごとの対応状況の調べ方