Our company has successfully developed a JavaScript video player that can be embedded on various websites using a script tag. As part of the bootstrapping process, we utilize XMLHttpRequest to fetch resources from our server. This creates cross-origin requests, but thanks to our correctly configured CORS headers, it works seamlessly in Chrome, Firefox, Safari, iOS, Android, and more. Interestingly, even Internet Explorer versions 11 and 10 support it without any issues.
However, our analytics data has revealed that approximately 10% of the time, the xhr object triggers an error event specifically in IE 11. Despite numerous attempts, I have not been able to reproduce this issue myself.
Could anyone offer insights into why this might be occurring? My current speculation revolves around potential corporate security settings within IE blocking our cross-origin request, but it's merely conjecture at this point.
Has anyone encountered a similar situation and identified the root cause?
Below is the code snippet I've written for handling these requests, and as far as I can tell, everything appears to be correct.
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;
}Any assistance or insights you can provide would be greatly appreciated!