web-dev-qa-db-fra.com

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 qui effectue la demande est file:///C:/path/to/XSL%20Website/index.html tandis 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?

jqueryxmlxsltcorsxmlhttprequest
206
Kevin Herrera

Dans les cas où l'exécution d'un serveur Web local n'est pas une option, vous pouvez permettre à Chrome d'accéder aux fichiers file:// via un commutateur de navigateur. Après quelques recherches, j’ai trouvé cette discussion , qui mentionne un changement de navigateur dans le post 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 peu d'autre chose. Vous ne voulez certainement pas l'activer en permanence. Cela semble toujours être un problème en suspens (à partir de janvier 2011).

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

174
Courtney Christensen

Pour l’essentiel, la seule solution consiste à faire fonctionner un serveur Web sur localhost et à le servir à partir de cet emplacement.

Il n’est pas sûr pour un navigateur d’autoriser 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 "fichier: //" comme n’ayant pas d’origine pour les besoins de " politique de même origine = "

Le démarrage d'un serveur Web peut être aussi simple que cd dans le répertoire dans lequel les fichiers sont en cours d'exécution:

python -m SimpleHTTPServer
87
Singletoned

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 à la demande.

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

Voici un script 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 &"
4
ericsoco

Qu'en est-il de l'utilisation de la fonction javascript FileReader pour ouvrir le 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>

Maintenant, cliquez sur le bouton Choose file et naviguez jusqu'au fichier file:///C:/path/to/XSL%20Website/data/home.xml

4
suhailvs

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

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

3
Stunner

La façon dont je viens de résoudre ce problème consiste à ne pas utiliser XMLHTTPRequest, mais à inclure les données nécessaires dans un fichier javascript distinct. (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 <div> afin de pouvoir les copier).

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

et ensuite inclus les données 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 qu'il serait trivial de modifier cela pour lire JSON, peut-être même XML; Je vais laisser ça comme un exercice pour le lecteur;)

2
Anthony Briggs

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

1
Shikon

utilisez le 'serveur Web pour chrome app'. (vous l'avez en fait sur votre ordinateur, que vous le sachiez ou non. Recherchez-le simplement dans Cortana!). ouvrez-le et cliquez sur 'Choisir le 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 un dossier".

si cela ne vous mène pas au fichier, ajoutez le nom du fichier à l’UR. comme ça:

   https://127.0.0.1:8887/fileName.txt

lien vers le serveur Web pour chrome: cliquez sur moi

0
person the human