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," 来实现此目的,但期望用户这样做是不可行的。
问题
- 是否需要一些特殊设置才能使 IE 10/11 遵循重定向?
- 除了不透明的中止请求之外,还有其他方法可以从 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 实际上解决了我遇到的具体问题。
我正在尝试从 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," 来实现此目的,但期望用户这样做是不可行的。
问题
- 是否需要一些特殊设置才能使 IE 10/11 遵循重定向?
- 除了不透明的中止请求之外,还有其他方法可以从 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 实际上解决了我遇到的具体问题。