XMLHttpRequest Origin null n'est pas autorisé Access-Control-Allow-Origin file: /// file: /// (Serverless)

StackOverflow https://stackoverflow.com/questions/4208530

Question

Je suis en train 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 sont utilisées en ligne.

Lorsque je tente d'utiliser le plugin AJAXSLT pour jQuery pour traiter un fichier XML avec un modèle XSL (dans les 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 qui fait la demande est file:///C:/path/to/XSL%20Website/index.html alors 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?

Était-ce utile?

La solution

Pour les cas où l'exécution d'un serveur web local n'est pas une option, vous pouvez autoriser l'accès à Chrome file:// fichiers via un commutateur de navigateur. Après quelques recherches, j'ai trouvé cette discussion , qui mentionne un commutateur de navigateur poste 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 rien d'autre. Vous ne voulez certainement pas tout le temps. Cela semble toujours être une question ouverte (à partir de janvier 2011).

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

Autres conseils

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

Il est peu sûr pour un navigateur pour autoriser une demande ajax d'accéder à un fichier sur votre ordinateur, semblent donc la plupart des navigateurs pour traiter « file: // » demandes comme ayant pas d'origine dans le but de « même politique origine "

À partir d'un serveur web peut être aussi trivial que cding dans le répertoire des fichiers sont en cours d'exécution et: 

python -m SimpleHTTPServer

Voici un AppleScript qui va lancer Chrome avec le --allow fichier de-accès-fichiers commutateur activé, pour devs OSX / Chrome là-bas: 

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 jQuery.getScript (). Ceci est 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 en utilisant javascript FileReader fonction pour ouvrir la fichier local, à savoir: 

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

Cliquez sur le bouton Choose file et recherchez le fichier file:///C:/path/to/XSL%20Website/data/home.xml

Lancement de chrome comme ainsi contourner cette restriction. open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files

Josh commentaire de Lee mais je besoin de spécifier le chemin complet vers Google Chrome afin d'éviter à ouvrir Google Chrome de ma partition Windows (dans Parallels).

La façon dont je viens CONTOURNÉS c'est de ne pas utiliser XMLHttpRequest du tout, mais inclure les données nécessaires dans un fichier JavaScript distinct à la place. (Dans mon cas je besoin d'un blob binaire SQLite à utiliser avec https://github.com/kripken/sql js / )

J'ai créé un fichier appelé base64_data.js (et btoa() utilisé pour convertir les données que je avais besoin et l'insérer dans un <div> pour que je puisse le copier). 

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

et inclus les données contenues dans le code 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 que ce serait trivial de modifier ceci 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]}).

utiliser le 'serveur Web pour l'application de chrome. (Vous avez réellement sur votre PC, vous savez wether ou non. Recherche juste à Cortana!). ouvrez-le et cliquez sur « choisir le fichier » choisissez le dossier avec votre fichier en elle. ne sélectionnez pas réellement votre fichier. sélectionnez votre dossier fichiers puis cliquez sur le lien (s) sous le bouton « Choisir un dossier ».

s'il ne marche pas vous prendre au fichier, puis ajouter le nom du fichier aux urs. comme ceci: 

   https://127.0.0.1:8887/fileName.txt

lien vers le serveur Web pour le chrome: cliquez sur moi

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top