Question

0

111

Views

CORS XMLHttpRequest fails in IE10-11 web worker

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

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

about 4 years ago · Santiago Trujillo

2 answers

Answer question

0

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/

about 4 years ago · Santiago Trujillo Report

Answer question

Find remote jobs

Accepted Answer · 2022-06-13T16:33:29.748Z

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.

0

111