CORS XMLHttpRequest 在 IE10-11 web worker 中失败

Question

我正在尝试创建一个跨域XMLHttpRequest 来自网络工作者。设置如下：

• 原始请求是针对同一个域example.com
• 服务器将请求重定向（302）到s3.amazon.com
• S3 已为 CORS 正确设置，以正确的 Access-Control-Allow-Origin 标头响应

代码如下：

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

Win 10 上的 Chrome、Firefox、Safari 和 MS Edge

当从主 JS 文件和网络工作者调用时，此代码正确地遵循重定向。

Win 7 上的 IE 10/11

当从主 JS 文件调用时，此代码正确地遵循重定向仅。当从 Web Worker 调用时，请求被中止，没有错误或日志消息。

可以通过编辑浏览器安全设置并启用“跨域访问数据源”来完成这项工作，但期望用户这样做是不可行的。

问题

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

Answer 1

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

选项 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 或重定向上，但没有一个真正解决我遇到的具体问题。

Answer 2

尝试在标头请求中设置更多元标记，例如 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();
}

欲了解更多详情，请查看此链接 - https://www.html5rocks.com/en/tutorials/cors/