CORS XMLHttpRequest fails in IE10-11 web worker

Question

I'm trying to make a cross-origin XMLHttpRequest from within a web worker. The setup is as follows:

• The original request is made to the same domain example.com
• The server redirects (302) the request to s3.amazon.com
• S3 is properly set up for CORS, responding with the proper Access-Control-Allow-Origin header

The code is as follows:

var xhr = new XMLHttpRequest();
//this will redirect to 'https://s3.amazon.com/...'
xhr.open('GET', 'https://example.com/document/1234/download');
xhr.send(null);

Chrome, Firefox, Safari, and MS Edge on Win 10

This code properly follows the redirect, both when called from the main JS file and from a web worker.

IE 10/11 on Win 7

This code properly follows the redirect only when called from the main JS file. When called from a web worker, the request is aborted without an error or log message.

It's possible to make this work by editing the browser security settings and enabling "Access data sources across domains," but it is not viable to expect users to do so.

Questions

1. Is there some special setup required to make IE 10/11 follow the redirect?
2. Is there a way to get better output from IE 10/11 other than an opaque aborted request?

Answer 1

There are several possible work-arounds to this problem, two of which I explored:

Option 1

function callXHR() {
  var xhr = new XMLHttpRequest();
  //this will redirect to 'https://s3.amazon.com/...'
  xhr.open('GET', 'https://example.com/document/1234/download');
  xhr.send(null);
}

if(isIE) {
   //callXHR in main js file
} else {
   //callXHR in web worker
}

Option 2

//from a web worker
if(isIE) {
   //give the exact url so the xhr doesn't get a 302
   callXHR('https://s3.amazon.com/...');
} else {
   //this will follow the redirect to https://aws...
   callXHR('https://example.com/document/1234/download');
}

I decided on Option 2 because I didn't want to give up the web worker.

The answers provided here were focused on CORS or redirects, but none actually addressed the specific problem I was having.

Answer 2

Try setting up few more metatags in header request, like xhr.setRequestHeader('Access-Control-Allow-Origin', example.com ); // from which request is made

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
  return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
  // This is a sample server that supports CORS.
  var url = 'https://example.com/document/1234/download';

  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
    alert('CORS not supported');
    return;
  }

  // Response handlers.
  xhr.onload = function() {
    var text = xhr.responseText;
    var title = getTitle(text);
    alert('Response from CORS request to ' + url + ': ' + title);
  };

  xhr.onerror = function() {
    alert('Woops, there was an error making the request.');
  };

  xhr.send();
}

For more details check this link - https://www.html5rocks.com/en/tutorials/cors/