L'origine nulle n'est pas autorisée par Access-Control-Allow-Origin

J'ai créé un petit fichier xslt pour créer une sortie html appelée weather.xsl avec le code suivant:

<!-- 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>

Je veux charger la sortie html dans un div dans un fichier html que j'essaie de faire en utilisant jQuery comme suit:

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

Mais j'obtiens l'erreur suivante: Origin null n'est pas autorisé par Access-Control-Allow-Origin.

J'ai lu sur l'ajout d'un en-tête au xslt, mais je ne sais pas comment faire cela, donc toute aide serait appréciée, et si le chargement dans la sortie html ne peut pas être fait de cette façon, alors des conseils sur la façon dont ce serait formidable.

Origin nullest le système de fichiers local, ce qui suggère que vous chargez la page HTML qui effectue l' loadappel via une file:///URL (par exemple, double-cliquez dessus dans un navigateur de fichiers local ou similaire). Différents navigateurs adoptent différentes approches pour appliquer la même politique d'origine aux fichiers locaux.

Je suppose que vous voyez cela avec Chrome. Les règles de Chrome pour appliquer le SOP aux fichiers locaux sont très strictes, il interdit même le chargement de fichiers à partir du même répertoire que le document. Il en va de même pour Opera. Certains autres navigateurs, tels que Firefox, autorisent un accès limité aux fichiers locaux. Mais fondamentalement, l'utilisation d'ajax avec des ressources locales ne fonctionnera pas entre les navigateurs.

Si vous testez simplement quelque chose localement que vous déploierez vraiment sur le Web, plutôt que d'utiliser des fichiers locaux, installez un simple serveur Web et testez http://plutôt via des URL. Cela vous donne une image de sécurité beaucoup plus précise.

Chrome et Safari ont une restriction sur l'utilisation d'ajax avec des ressources locales. C'est pourquoi il lance une erreur comme

L'origine nulle n'est pas autorisée par Access-Control-Allow-Origin.

Solution: utilisez Firefox ou téléchargez vos données sur un serveur temporaire. Si vous souhaitez toujours utiliser Chrome, démarrez-le avec l'option ci-dessous;

--allow-file-access-from-files

Plus d'informations comment ajouter le paramètre ci-dessus à votre Chrome: Faites un clic droit sur l'icône Chrome dans votre barre des tâches, faites un clic droit sur Google Chrome dans la fenêtre pop-up et cliquez sur Propriétés et ajoutez le paramètre ci-dessus dans la zone de texte Cible sous l'onglet Raccourci. Il aimera comme ci-dessous;

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

J'espère que cela aidera!

Je voulais juste ajouter que la réponse «exécuter un serveur Web» semble assez intimidante, mais si vous avez python sur votre système (installé par défaut au moins sur MacOS et toute distribution Linux), c'est aussi simple que:

python -m http.server  # with python3

ou

python -m SimpleHTTPServer  # with python2

Donc, si vous avez votre fichier html myfile.htmldans un dossier, disons mydir, tout ce que vous avez à faire est:

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

Puis pointez votre navigateur sur:

http://localhost:8000/myfile.html

Et vous avez terminé! Fonctionne sur tous les navigateurs , sans désactiver la sécurité Web, autoriser les fichiers locaux ou même redémarrer le navigateur avec des options de ligne de commande.

Je voudrais humblement ajouter que selon cette source SO: https://stackoverflow.com/a/14671362/1743693 , ce genre de problème est maintenant partiellement résolu simplement en utilisant l'instruction jQuery suivante:

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

Je l'ai essayé sur IE10.0.9200, et cela a fonctionné immédiatement (en utilisant jquery-1.9.0.js).

Sur chrome 28.0.1500.95 - cette instruction ne fonctionne pas (cela se produit partout comme David se plaint dans les commentaires sur le lien ci-dessus)

L'exécution de chrome avec --allow-file-access-from-files ne fonctionnait pas pour moi (comme le prétend Maistora ci-dessus)

Ajout d'un peu pour utiliser la solution de Gokhan pour utiliser:

--allow-file-access-from-files

Il vous suffit maintenant d'ajouter le texte ci-dessus dans le texte cible suivi d'un espace. assurez-vous de fermer toutes les instances du navigateur Chrome après avoir ajouté la propriété ci-dessus. Redémarrez maintenant Chrome par l'icône où vous avez ajouté cette propriété. Cela devrait fonctionner pour tous.

Je cherchais une solution pour faire une requête XHR à un serveur à partir d'un fichier html local et j'ai trouvé une solution utilisant Chrome et PHP. (pas de 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();

En-tête de demande de mon Chrome Origin: null

Mon en-tête de réponse PHP (notez que «null» est une chaîne ). HTTP_REFERER autorise l'origine croisée d'un serveur distant à un autre.

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

J'ai pu me connecter avec succès à mon serveur. Vous pouvez ignorer les en-têtes Credentials, mais cela fonctionne pour moi avec Apache AuthType Basicactivé

J'ai testé la compatibilité avec FF et Opera, cela fonctionne dans de nombreux cas tels que:

Depuis une IP LAN VM (192.168.0.x) vers l'IP WAN (publique) de
VM : port Depuis une IP LAN VM vers un nom de domaine de serveur distant.
À partir d'un fichier .HTML local vers l'adresse IP LAN de la VM et / ou l'IP WAN de la VM: port,
D'un fichier .HTML local vers un nom de domaine de serveur distant.
Etc.

Vous pouvez charger un fichier Javascript local (dans l'arborescence sous votre file:/page source) en utilisant la balise source:

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

Si vous encodez votre entrée en Javascript, comme dans ce cas:

mydata.js :

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

(c'est plus facile pour json) alors vous avez vos 'données' dans une variable globale Javascript à utiliser comme vous le souhaitez.