web-dev-qa-db-fra.com

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 une div dans un fichier html que j'essaie de faire avec 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 le faire, alors toute aide serait la bienvenue, et si le chargement dans la sortie html ne peut pas être fait de cette façon, alors des conseils sur la manière autrement ce serait génial de le faire.

jqueryhtmlcors
173
dudledok

Origine null est le système de fichiers local. Cela suggère donc que vous chargez la page HTML qui appelle load via une URL file:/// (par exemple, en double-cliquant dessus dans un fichier). navigateur de fichiers local ou similaire). Différents navigateurs adoptent des approches différentes pour appliquer le même politique d'origine à des fichiers locaux.

Mon hypothèse est que vous voyez ceci en utilisant Chrome. Les règles de Chrome pour appliquer le SOP aux fichiers locaux sont très strictes, il est même interdit de charger des fichiers à partir du même répertoire que le document. Tout comme l'opéra. Certains autres navigateurs, tels que Firefox, autorisent un accès limité aux fichiers locaux. Mais fondamentalement, utiliser ajax avec des ressources locales ne fonctionnera pas avec plusieurs navigateurs.

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

216
T.J. Crowder

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

Origin null n'est pas autorisé 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 sur la façon d'ajouter le paramètre ci-dessus à votre Chrome: Cliquez avec le bouton droit de la souris sur l'icône Chrome de votre barre de tâches, cliquez avec le bouton droit de la souris sur Google Chrome. fenêtre en haut, cliquez sur Propriétés et ajoutez le paramètre ci-dessus dans la zone de texte Cible sous l'onglet Raccourci. Il va aimer 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!

213
Gokhan Tank

Je voulais juste ajouter que la réponse "exécuter un serveur Web" semble assez décourageante, mais si vous avez python sur votre système (installé au moins par défaut sur MacOS et toute distribution Linux), rien de plus simple:

python -m http.server  # with python3

ou

python -m SimpleHTTPServer  # with python2

Donc si vous avez votre fichier html myfile.html dans un dossier, dites 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.

41
gozzilli

Ajouter un peu pour utiliser la solution de Gokhan pour utiliser:

--allow-file-access-from-files

Il ne vous reste plus qu'à ajouter le texte ci-dessus dans le texte cible suivi d'un espace. assurez-vous de fermer toutes les instances de chrome browser après avoir ajouté la propriété ci-dessus. Maintenant, redémarrez chrome par l’icône où vous avez ajouté cette propriété. Cela devrait fonctionner pour tous.

2
saurabh

Je voudrais ajouter humblement que, selon cette SO source: https://stackoverflow.com/a/14671362/174369 , 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 car 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 l'affirme Maistora plus haut)

2
orberkov