javascript - headers - Circunstancia de Chrome Access-control-allow-origin en el sistema de archivos local?

access-control-allow-origin php

Question

He leído los otros temas de política de origen aquí en SO, pero no he visto ninguna solución relacionada con el sistema de archivos local.

Tengo una aplicación web (en un sentido amplio de la palabra) que debe ser servida localmente. Intento cargar una gran cantidad de datos después de que el usuario cargó la página, según lo que estén haciendo en la página web. En Firefox 3.5 e IE8 puedo usar los métodos de jQuery AJAX () y GetScript () para hacer esto, pero en Chrome esto falla debido a la misma política de origen.

XMLHttpRequest no puede cargar el file://test/testdir/test.js . El null origen no está permitido by Access-Control-Allow-Origin .

Esto sucede cuando hago algo simple como

$.getScript("test.js");

Esto funciona perfectamente bien en IE y Firefox.

Después de leer un montón sobre esto, decidí intentar escribir directamente en el encabezado del documento. En la consola en Chrome escribí lo siguiente:

var head = document.getElementsByTagName("head")[0];
var script =document.createElement(''script'');
script.id = ''uploadScript'';
script.type = ''text/javascript'';
script.src = "upload.js";
head.appendChild(script);

Esto funciona bien cuando se pega en la consola: el elemento <script...test.js</script> se agrega al encabezado, se evalúa y se carga contenido en el DOM.

Pensé que esto fue exitoso, hasta que puse este código en una llamada a función. El mismo código exacto, cuando se llama desde una función, agrega el elemento a, pero no evalúa el archivo JavaScript. No puedo entender por qué. Si utilizo la consola de Chrome para detener la ejecución en el método en el que está agregando el elemento y ejecuto el código anterior, no lo evalúa. Sin embargo, si reanudo la ejecución y ejecuto exactamente el mismo código (pegándolo en la ventana de la consola), funciona. No puedo explicar esto. ¿Alguien a lidiado con esto antes?

He leído las siguientes publicaciones de SO, pero no están describiendo el problema que tengo:

Formas de eludir la política del mismo origen
XMLHttpRequest Origin null no está permitido Access-Control-Allow-Origin para el archivo: /// al archivo: /// (Sin servidor)
Cross-site XMLHttpRequest

Nuevamente, mi último recurso es cargar todos los datos en la carga de la página web. Esto puede causar hasta 10 segundos de retraso en la carga de la página web que es innecesario para el 90% de los usuarios de la aplicación.

Gracias por cualquier sugerencia / alternativa!

Answer 1

Creo que lo he descubierto.

Todo lo que realmente necesitaba hacer era agregar una devolución de llamada en mi etiqueta <script> . Código final:

Tengo un elemento nombrado al lado ... Entonces, en la función $("#next").click() , tengo el siguiente código. Esto solo se ejecuta si hacen clic en "siguiente".

//remove old dynamically written script tag-
var old = document.getElementById(''uploadScript'');
if (old != null) {
old.parentNode.removeChild(old);
delete old;
}
var head = document.getElementsByTagName("head")[0];
script = document.createElement(''script'');
script.id = ''uploadScript'';
script.type = ''text/javascript'';
script.src = ''test/'' + scope_dir + ''/js/list.js'';
script.onload = refresh_page;
head.appendChild(script);
function refresh_page(){
//perform action with data loaded from the .js file.
}

Parece que esto funciona, y permite a Chrome cargar dinámicamente archivos .js en el sistema de archivos local mientras elude la política de acceso-control-permiso-origen que encontré al intentar usar las funciones de jQuery.

Answer 2

Interesante, pero ¿cómo puedo usar la misma técnica para cargar todo un archivo HTML? Problema similar al suyo: tengo cientos de archivos HTML que quiero incluir en una página web, dependiendo de lo que el usuario quiera ver. Parece que puedo usar esta técnica para cargar en una página HTML completa, algo así como:

script.id = ''uploadScript'';
script.type = ''text/html'';
script.src = url;
script.onload = refresh_page;
head.appendChild(script);

es decir, dígale que cargue en HTML. Puedo ver desde la consola que está cargando en la página, y aparece el mensaje ''Recurso interpretado como script pero transferido con texto tipo MIME / html''. Pero no puedo encontrar la forma de obtener el HTML cargado y retenido dentro del script

Answer 3

Ok, hice muchos ajustes y perdí mucho tiempo. Pero lo tengo calculado. La solución en mi última respuesta funciona bien para Chrome y para Mozilla. Pero no funciona para IE bendecido, porque IE no activará el evento de carga: cree que se ha ocupado de todas las cargas en este archivo y no puede hacer que haga otro. Sin embargo, IE está muy contento de cargar el archivo utilizando la función JQuery getScript (que Chrome no permitirá debido a la política de control de cceso-permitir-origen) - necesitará las bibliotecas JQuery para que esto funcione. Así que aquí es a lo que terminé:

function getMyText(){
var url=''mylocalfile.js'';
if (jQuery.support.scriptEval) {
var old = document.getElementById(''uploadScript'');
if (old != null) {
old.parentNode.removeChild(old);
delete old;
}
var head = document.getElementsByTagName("head")[0];
var script = document.createElement(''script'');
script.id = ''uploadScript'';
script.type = ''text/javascript'';
script.onload = refresh_page;
script.src = url;
head.appendChild(script);
} else {
$.getScript(url,function(){
refresh_page();
});
}
}
function refresh_page() {
alert(mytext);
}

En todo esto, mylocaltext.js define todo mi html como el contenido de una variable, mytext. Feo, pero funciona. jQuery.support.scriptEval es verdadero para los navegadores inteligentes que activan los eventos de carga si el DOM cambia. IE no lo hace, por lo que lo envía a .getScript; Chrome y otros lo hacen, por lo que los envía de otra forma. De todos modos, esto funciona en archivos locales.