Estoy tratando de hacer un XMLHttpRequest de origen cruzado desde dentro de un trabajador web . La configuración es la siguiente:
example.coms3.amazon.comAccess-Control-Allow-Origin adecuadoEl código es el siguiente:
var xhr = new XMLHttpRequest(); //this will redirect to 'https://s3.amazon.com/...' xhr.open('GET', 'https://example.com/document/1234/download'); xhr.send(null);Este código sigue correctamente la redirección, tanto cuando se llama desde el archivo JS principal como desde un trabajador web.
Este código sigue correctamente la redirección solo cuando se llama desde el archivo JS principal. Cuando se llama desde un trabajador web, la solicitud se anula sin un error o mensaje de registro.
Es posible hacer que esto funcione editando la configuración de seguridad del navegador y habilitando "Acceder a fuentes de datos en todos los dominios", pero no es viable esperar que los usuarios lo hagan.
Hay varias soluciones posibles a este problema, dos de las cuales exploré:
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 } //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'); }Me decidí por la Opción 2 porque no quería renunciar al trabajador web.
Las respuestas proporcionadas aquí se centraron en CORS o redireccionamientos, pero ninguna abordó el problema específico que estaba teniendo.
Intente configurar algunas metaetiquetas más en la solicitud de encabezado, como xhr.setRequestHeader('Access-Control-Allow-Origin', example.com); // desde donde se realiza la solicitud
// 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(); }Para obtener más detalles, consulte este enlace: https://www.html5rocks.com/en/tutorials/cors/