仕事で少し調べたので、その時のメモです。
XMLHttpRequestでクロスドメインにリクエストを送信する時にCookieもリクエストに含めたい場合は以下のように書きます。
|
1 2 3 4 5 6 7 8 9 |
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のブラウザごとの対応状況の調べ方
