El origen nulo no está permitido por Access-Control-Allow-Origin

He creado un pequeño archivo xslt para crear una salida html llamada weather.xsl con el siguiente código:

<!-- DWXMLSource="http://weather.yahooapis.com/forecastrss?w=38325&u=c" -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
exclude-result-prefixes="yweather"
xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <img src="{/*/*/item/yweather:condition/@text}.jpg"/>
</xsl:template>
</xsl:stylesheet>

Quiero cargar la salida html en un div en un archivo html que estoy tratando de hacer usando jQuery de la siguiente manera:

<div id="result">
<script type="text/javascript">
$('#result').load('weather.xsl');
</script>
</div>

Pero recibo el siguiente error: Access null no está permitido por Access-Control-Allow-Origin.

He leído sobre agregar un encabezado al xslt, pero no estoy seguro de cómo hacerlo, por lo que agradecería cualquier ayuda, y si la carga en la salida html no se puede hacer de esta manera, entonces se aconseja cómo más hacerlo sería genial.

Origin nulles el sistema de archivos local, por lo que sugiere que está cargando la página HTML que realiza la loadllamada a través de una file:///URL (por ejemplo, simplemente haciendo doble clic en un explorador de archivos local o similar). Los diferentes navegadores adoptan diferentes enfoques para aplicar la Política del mismo origen a los archivos locales.

Supongo que estás viendo esto usando Chrome. Las reglas de Chrome para aplicar el SOP a los archivos locales son muy estrictas, no permite incluso cargar archivos desde el mismo directorio que el documento. También lo hace Opera. Algunos otros navegadores, como Firefox, permiten un acceso limitado a los archivos locales. Pero básicamente, usar ajax con recursos locales no va a funcionar entre navegadores.

Si solo está probando algo localmente que realmente implementará en la web, en lugar de usar archivos locales, instale un servidor web simple y pruebe a través de http://URL. Eso le da una imagen de seguridad mucho más precisa.

Chrome y Safari tienen una restricción sobre el uso de ajax con recursos locales. Es por eso que arroja un error como

El origen nulo no está permitido por Access-Control-Allow-Origin.

Solución: use firefox o cargue sus datos en un servidor temporal. Si aún desea usar Chrome, comience con la siguiente opción;

--allow-file-access-from-files

Más información sobre cómo agregar el parámetro anterior a su Chrome: haga clic derecho en el icono de Chrome en su barra de tareas, haga clic con el botón derecho en Google Chrome en la ventana emergente y haga clic en propiedades y agregue el parámetro anterior dentro del cuadro de texto Destino en la pestaña Atajo. Le gustará como a continuación;

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

Espero que esto ayude!

Solo quería agregar que la respuesta "ejecutar un servidor web" parece bastante desalentadora, pero si tiene Python en su sistema (instalado de forma predeterminada al menos en MacOS y cualquier distribución de Linux) es tan fácil como:

python -m http.server  # with python3

o

python -m SimpleHTTPServer  # with python2

Entonces, si tiene su archivo html myfile.htmlen una carpeta, digamos mydir, todo lo que tiene que hacer es:

cd /path/to/mydir
python -m http.server  # or the python2 alternative above

Luego apunte su navegador a:

http://localhost:8000/myfile.html

Y ya está! Funciona en todos los navegadores , sin deshabilitar la seguridad web, permitir archivos locales o incluso reiniciar el navegador con opciones de línea de comandos.

Me gustaría agregar humildemente que de acuerdo con esta fuente SO: https://stackoverflow.com/a/14671362/1743693 , este tipo de problema ahora se resuelve parcialmente simplemente usando la siguiente instrucción jQuery:

<script> 
    $.support.cors = true;
</script>

Lo probé en IE10.0.9200, y funcionó de inmediato (usando jquery-1.9.0.js).

En Chrome 28.0.1500.95: esta instrucción no funciona (esto sucede todo cuando David se queja en los comentarios en el enlace de arriba)

Ejecutar Chrome con --allow-file-access-from-files no funcionó para mí (como afirma Maistora anteriormente)

Agregando un poco para usar la solución de Gokhan para usar:

--allow-file-access-from-files

Ahora solo necesita agregar el texto de arriba en el Texto de destino seguido de un espacio. asegúrese de cerrar todas las instancias del navegador Chrome después de agregar la propiedad anterior. Ahora reinicie Chrome con el icono donde agregó esta propiedad. Debería funcionar para todos.

Estaba buscando una solución para hacer una solicitud XHR a un servidor desde un archivo html local y encontré una solución usando Chrome y PHP. (sin Jquery)

Javascripts:

var x = new XMLHttpRequest(); 
if(x) x.onreadystatechange=function(){ 
    if (x.readyState === 4 && x.status===200){
        console.log(x.responseText); //Success
    }else{ 
        console.log(x); //Failed
    }
};
x.open(GET, 'http://example.com/', true);
x.withCredentials = true;
x.send();

El encabezado de solicitud de mi Chrome Origin: null

Mi encabezado de respuesta PHP (tenga en cuenta que 'nulo' es una cadena ). HTTP_REFERER permite el origen cruzado de un servidor remoto a otro.

header('Access-Control-Allow-Origin: '.(trim($_SERVER['HTTP_REFERER'],'/')?:'null'),true);
header('Access-Control-Allow-Credentials:true',true);

Pude conectarme con éxito a mi servidor. Puede ignorar los encabezados de Credenciales, pero esto funciona para mí con ApacheAuthType Basic habilitado

Probé la compatibilidad con FF y Opera, funciona en muchos casos como:

Desde una IP LAN de VM (192.168.0.x) de regreso a la IP WAN (pública) de
VM : puerto Desde una IP LAN de VM de regreso a un nombre de dominio de servidor remoto.
Desde un archivo .HTML local a la IP LAN de VM y / o IP WAN de VM: puerto,
Desde un archivo .HTML local a un nombre de dominio de servidor remoto.
Y así.

Puede cargar un archivo Javascript local (en el árbol debajo de su file:/página de origen) usando la etiqueta de origen:

<script src="my_data.js"></script>

Si codifica su entrada en Javascript, como en este caso:

mydata.js :

$xsl_text = "<xsl:stylesheet version="1.0" + ....

(esto es más fácil para json), entonces tiene sus 'datos' en una variable global Javascript para usar como desee.