Problèmes avec jQuery getJSON utilisant des fichiers locaux dans Chrome

J’ai une page de test très simple qui utilise les requêtes XHR avec les méthodes $ .getJSON et $ .ajax de jQuery. La même page fonctionne dans certaines situations et pas dans d’autres. Spécifiquement, il ne fonctionne pas dans Chrome sur Ubuntu.

Je teste sur Ubuntu 9.10 avec Chrome 5.0.342.7 beta et Mac OSX 10.6.2 avec Chrome 5.0.307.9 beta.

  • Cela fonctionne correctement lorsque des fichiers sont installés sur un serveur Web à partir d’Ubuntu / Chrome et de Mac / Chrome ( essayez-le ici ).
  • Cela fonctionne correctement lorsque les fichiers sont installés sur le disque dur local sous Mac / Chrome (accessible avec le fichier: /// …).
  • Il échoue lorsque des fichiers sont installés sur le disque dur local dans Ubuntu / Chrome (access avec le fichier: /// …).

Le petit ensemble de 3 fichiers peut être téléchargé dans un fichier tar / gzip ici: http://issues.tauren.com/testjson/testjson.tgz

Lorsque cela fonctionnera, la console Chrome indiquera:

XHR finished loading: "http://issues.tauren.com/testjson/data.json". index.html:16Using getJSON index.html:21 Object result: "success" __proto__: Object index.html:22success XHR finished loading: "http://issues.tauren.com/testjson/data.json". index.html:29Using ajax with json dataType index.html:34 Object result: "success" __proto__: Object index.html:35success XHR finished loading: "http://issues.tauren.com/testjson/data.json". index.html:46Using ajax with text dataType index.html:51{"result":"success"} index.html:52undefined 

Lorsque cela ne fonctionne pas, la console Chrome affiche ceci:

 index.html:16Using getJSON index.html:21null index.html:22Uncaught TypeError: Cannot read property 'result' of null index.html:29Using ajax with json dataType index.html:34null index.html:35Uncaught TypeError: Cannot read property 'result' of null index.html:46Using ajax with text dataType index.html:51 index.html:52undefined 

Notez qu’il ne montre même pas les requêtes XHR, bien que le gestionnaire de réussite soit exécuté. Je jure que cela fonctionnait auparavant dans Ubuntu / Chrome, et je craignais que quelque chose ne soit gâché. J’ai déjà désinstallé et réinstallé Chrome, mais cela n’a pas aidé.

Quelqu’un peut-il l’essayer localement sur votre système Ubuntu et me dire si vous avez des problèmes? Notez que cela semble fonctionner correctement dans Firefox.

Ceci est un problème connu avec Chrome.

Voici le lien dans le gestionnaire de bogues:

Problème 40787: Les fichiers locaux ne sont pas chargés avec Ajax

Une autre façon de le faire est de démarrer un serveur HTTP local sur votre répertoire. Sur Ubuntu et MacO avec Python installé, c’est un one-liner.

Accédez au répertoire contenant vos fichiers Web et:

 python -m SimpleHTTPServer 

Connectez-vous ensuite à http: // localhost: 8000 / index.html avec n’importe quel navigateur Web pour tester votre page.

Sous Windows, Chrome peut être installé dans votre dossier AppData:

“C: \ Utilisateurs \\ AppData \ Local \ Google \ Chrome \ Application”

Avant d’exécuter la commande, assurez-vous que toutes vos fenêtres Chrome sont fermées et ne s’exécutent pas autrement. Ou, le paramètre de ligne de commande ne serait pas efficace.

 chrome.exe --allow-file-access-from-files 

Vous pouvez placer votre fichier json dans js et l’enregistrer dans la variable globale. Ce n’est pas asynchrone, mais cela peut aider.

Un moyen supplémentaire de contourner le problème consiste à utiliser les méthodes sandbox et ExternalInterface de la sécurité locale de Flash Player. On peut avoir JavaScript demander une application Flash publiée en utilisant le sandbox de sécurité Local Only pour charger le fichier à partir du disque dur, et Flash peut transmettre les données à JavaScript via la classe ExternalInterface de Flash. Je l’ai testé dans Chrome, FF et IE9, et cela fonctionne bien. Je serais heureux de partager le code si quelqu’un est intéressé.

EDIT: J’ai lancé un projet de code Google (ironique?) Pour l’implémentation: http://code.google.com/p/flash-loader/

@Mike Sur Mac, tapez ceci dans Terminal:

 open -b com.google.chrome --args --disable-web-security 

Ce code fonctionnait bien avec sheet.jsonlocally avec browser-sync comme serveur local. -Mais quand sur mon serveur distant j’ai eu un 404 pour le fichier sheet.json en utilisant Chrome. Cela a bien fonctionné dans Safari et Firefox. -Changé le nom sheet.json à sheet.JSON. Ensuite, cela a fonctionné sur le serveur distant. Quelqu’un d’autre a cette expérience?

 getthejason = function(){ var dataurl = 'data/sheet.JSON'; var xhr = new XMLHttpRequest(); xhr.open('GET', dataurl, true); xhr.responseType = 'text'; xhr.send(); console.log('getthejason!'); xhr.onload = function() { ..... }