仕事で少し調べたので、その時のメモです。
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のブラウザごとの対応状況の調べ方