CORS XMLHttpRequest 在 IE10-11 web worker 中失败

CORS XMLHttpRequest fails in IE10-11 web worker

我正在尝试从 Web Worker 中创建一个 cross-origin XMLHttpRequest 。设置如下:

  • 原始请求是向同一个域发出的example.com
  • 服务器将请求重定向 (302) 到 s3.amazon.com
  • S3 已针对 CORS 正确设置,以正确的 Access-Control-Allow-Origin header
  • 响应

代码如下:

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、Win 10 上的 Firefox、Safari 和 MS Edge

无论是从主 JS 文件还是从 Web Worker 调用时,此代码都正确地遵循重定向。

Win 7 上的 IE 10/11

当从主 JS 文件调用时,此代码正确地遵循重定向 。当从网络工作者调用时,请求被中止,没有错误或日志消息。

可以通过编辑浏览器安全设置并启用 "Access data sources across domains," 来实现此目的,但期望用户这样做是不可行的。

问题

  1. 是否需要一些特殊设置才能使 IE 10/11 遵循重定向?
  2. 除了不透明的中止请求之外,还有其他方法可以从 IE 10/11 获得更好的输出吗?

尝试在 header 请求中设置更多元标记,例如 xhr.setRequestHeader('Access-Control-Allow-Origin', example.com); // 从中发出请求

// 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();
}

有关详细信息,请查看此 link - https://www.html5rocks.com/en/tutorials/cors/

这个问题有几种可能的解决方法,我探索了其中两种:

选项 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
}

选项 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');
}

我决定选择选项 2,因为我不想放弃 web worker。

此处提供的答案主要针对 CORS 或重定向,但 none 实际上解决了我遇到的具体问题。