XMLHttpRequest Origin null n'est pas autorisé Access-Control-Allow-Origin pour le fichier: /// vers le fichier: /// (sans serveur)

J'essaie de créer un site Web qui peut être téléchargé et exécuté localement en lançant son fichier d'index.

Tous les fichiers sont locaux, aucune ressource n'est utilisée en ligne.

Lorsque j'essaie d'utiliser le plug-in AJAXSLT pour jQuery pour traiter un fichier XML avec un modèle XSL (dans des sous-répertoires), je reçois les erreurs suivantes:

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/data/home.xml. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/assets/xsl/main.xsl. Origin null is not allowed by Access-Control-Allow-Origin.

Le fichier d'index faisant la demande est file:///C:/path/to/XSL%20Website/index.htmlalors que les fichiers JavaScript utilisés sont stockés dans file:///C:/path/to/XSL%20Website/assets/js/.

Comment puis-je faire pour résoudre ce problème?

Dans les cas où l'exécution d'un serveur Web local n'est pas une option, vous pouvez autoriser Chrome à accéder aux file://fichiers via un commutateur de navigateur. Après quelques recherches, j'ai trouvé cette discussion , qui mentionne un changement de navigateur dans le message d'ouverture. Exécutez votre instance Chrome avec:

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

Cela peut être acceptable pour les environnements de développement, mais pas grand-chose d'autre. Vous ne voulez certainement pas cela tout le temps. Cela semble toujours être un problème ouvert (en janvier 2011).

Voir aussi: Problèmes avec jQuery getJSON à l'aide de fichiers locaux dans Chrome

Essentiellement, la seule façon de résoudre ce problème est d'avoir un serveur Web en cours d'exécution sur localhost et de les servir à partir de là.

Il n'est pas sûr qu'un navigateur autorise une requête ajax à accéder à n'importe quel fichier de votre ordinateur, par conséquent, la plupart des navigateurs semblent traiter les requêtes "file: //" comme n'ayant aucune origine aux fins de la " même politique d'origine". ".

Le démarrage d'un serveur Web peut être aussi simple que d' cdentrer dans le répertoire dans lequel les fichiers se trouvent et s'exécutent:

python -m SimpleHTTPServer

Voici un script Apple qui lancera Chrome avec le commutateur --allow-file-access-from-files activé, pour les développeurs OSX / Chrome:

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"    
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

Cette solution vous permettra de charger un script local à l'aide de jQuery.getScript (). Il s'agit d'un paramètre global, mais vous pouvez également définir l'option crossDomain sur une base par demande.

$.ajaxPrefilter( "json script", function( options ) {
  options.crossDomain = true;
});

Qu'en est-il de l'utilisation de la fonction javascript FileReader pour ouvrir le fichier local, c'est-à-dire:

<input type="file" name="filename" id="filename">
<script>
$("#filename").change(function (e) {
  if (e.target.files != undefined) {
    var reader = new FileReader();
    reader.onload = function (e) {
        // Get all the contents in the file
        var data = e.target.result; 
        // other stuffss................            
    };
    reader.readAsText(e.target.files.item(0));
  }
});
</script>

Maintenant, cliquez sur le Choose filebouton et accédez au fichierfile:///C:/path/to/XSL%20Website/data/home.xml

Lancez Chrome comme ça pour contourner cette restriction: open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files .

Dérivé du commentaire de Josh Lee, mais je devais spécifier le chemin complet vers Google Chrome afin d'éviter que Google Chrome ne s'ouvre depuis ma partition Windows (dans Parallels).

La façon dont je viens de contourner ce problème n'est pas du tout d'utiliser XMLHTTPRequest, mais d'inclure les données nécessaires dans un fichier javascript distinct à la place. (Dans mon cas, j'avais besoin d'un blob SQLite binaire à utiliser avec https://github.com/kripken/sql.js/ )

J'ai créé un fichier appelé base64_data.js(et utilisé btoa()pour convertir les données dont j'avais besoin et les insérer dans un fichier <div>pour pouvoir les copier).

var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";

puis inclus les données dans le html comme javascript normal:

<div id="test"></div>

<script src="base64_data.js"></script>
<script>
    data = atob(base64_data);
    var sqldb = new SQL.Database(data);
    // Database test code from the sql.js project
    var test = sqldb.exec("SELECT * FROM Genre");
    document.getElementById("test").textContent = JSON.stringify(test);
</script>

J'imagine qu'il serait trivial de modifier cela pour lire JSON, peut-être même XML; Je vais laisser cela comme un exercice pour le lecteur;)

Vous pouvez essayer de mettre 'Access-Control-Allow-Origin':'*'en response.writeHead(, {[here]}).

utilisez le «serveur Web pour l'application Chrome». (vous l'avez en fait sur votre PC, que vous le sachiez ou non. Il suffit de le rechercher dans Cortana!). ouvrez-le et cliquez sur «choisir un fichier», choisissez le dossier contenant votre fichier. ne sélectionnez pas réellement votre fichier. sélectionnez votre dossier de fichiers puis cliquez sur le (s) lien (s) sous le bouton 'choisir le dossier'.

s'il ne vous amène pas au fichier, ajoutez le nom du fichier aux urs. comme ça:

   https://127.0.0.1:8887/fileName.txt

lien vers le serveur web pour chrome: cliquez sur moi