01 February 2015

XDomainRequest の通信が中断する

再現条件がわからないが、XDomainRequest を使った GET リクエストが必ず abort してしまうことがあった。このようなコードで発生した。

var url = '...';  // url to send request
var callback = function() {
    // callback function of http request
}

var xdr = new XDomainRequest();

xdr.onload = function() {
    var result;
    try {
        // do something with result
    } catch (error) {
        callback(error);
        return;
    }

    callback(null, result);
};
xdr.onerror = function() {
    callback(new Error('Network error'));
};
xdr.open('GET', url);
xdr.withCredentials = true;
xdr.send();

こちらの StackOverflow のスレッドによると、XDomainRequest の各イベントハンドラに関数を登録することで回避できるらしい。

ajax - XDomainRequest aborts POST on IE 9 - Stack Overflow

よって以下のように ontimeoutonprogress にもハンドラを登録すると解消した。

var url = '...';  // url to send request
var callback = function() {
    // callback function of http request
}

var xdr = new XDomainRequest();

xdr.onload = function() {
    var result;
    try {
        // do something with result
    } catch (error) {
        callback(error);
        return;
    }

    callback(null, result);
};
xdr.onerror = function() {
    callback(new Error('Network error'));
};

// ハンドラを追加
xdr.ontimeout = function () {
    callback(new Error('Network timeout'));
};
xdr.onprogress = function() {};  // 内容は空でもいいらしい

xdr.open('GET', url);
xdr.withCredentials = true;
xdr.send();

StackOverflow は POST についての話題だったが、今回のように GET でも同様だった。