IE 11 XHR故障

Question

My company has developed an embeddable javascript video player. Part of the bootstrapping process involves using XMLHttpRequest to fetch a resource from our server. This is a cross-origin request because our video player is embedded on other people's sites via a script tag. We have our CORS headers configured correctly and it working in Chrome, Firefox, Safari, iOS, Android, and others. It also works for me when I test in IE 11 and 10.

However, from our analytics data, we are seeing the xhr object raise the error event about 10% of the time in IE 11. I have not been able to reproduce the issue myself.

Can anybody think of any reasons why this might be happening? The best theory I have is some kind of corporate IE security settings are blocking our cross-origin request. But that's just wild speculation.

Has anybody else ever experienced something like this and found a cause?

Here is the code I wrote for making the requests. I don't believe I'm doing anything wrong.

function makeRequest(config) {
  var xhr = new window.XMLHttpRequest();
  var deferred = q.defer();
  var url;

  function setHeaders(headers) {
    var header;

    for (header in headers) {
      xhr.setRequestHeader(header, headers[header]);
    }
  }

  // toQueryParams() converts an object to URL query params
  url = config.url + toQueryParams(config.params);

  /*
  * This function gets called when the XHR is "loaded". It then fulfills or rejects
  * the promise based on the HTTP status code of the response.
  */
  function handleResponse() {
    var response = {
      status: xhr.status,
      data: (function() {
        try {
          return JSON.parse(xhr.responseText);
        } catch(e) {
          return xhr.responseText;
        }
      }()),
      headers: function() {
        return xhr.getAllResponseHeaders();
      }
    };
    var status = response.status,
    var success = !(status >= 400 && status < 600);

    deferred[success ? 'resolve' : 'reject'](response);
  }

  /*
  * This function gets called when the XHR emits an "error".
  *
  * There is code elsewhere that sends these errors to our Google Analytics
  * account. This is how we know about the IE 11 XHR errors even though I
  * can't reproduce them.
  */
  function handleError() {
    deferred.reject({
      status: null,
      data: new Error('The XHR request to [' + url + '] has failed...'),
      headers: function() {
        return null;
      }
    });
  }

  xhr.onload = handleResponse;
  xhr.onerror = handleError;

  xhr.open(config.method, url, true);

  xhr.responseType = config.responseType || '';
  setHeaders(config.headers);
  xhr.timeout = config.timeout || 0;

  xhr.send(config.data);

  return deferred.promise;
}

Thanks for any help you can provide!

</div>

Answer 1

Not sure if this is still relevant but your problem sounds suspiciously like - this

I am also facing the exact same issue. In my case, this happens when IE aborts the request and the request doesn't hit the server. In this case, the xhr.status is 0 and response is empty, so parsing the JSON will throw an exception.

I could not find a foolproof fix to this, but my workaround is to retry the calls a couple of time with same parameters/payload in the error block if the response matched the IE abort scenario.

Cheers!