Les demandes d'origine croisée ne sont prises en charge que pour le protocole HTTP, mais pas pour les domaines croisés.

Question

J'utilise ce code pour faire une requête AJAX :

$("#userBarSignup").click(function(){
    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",
        {/*params*/},
        function(response){
            $("#signup").html("TEST");
            $("#signup").html(response);
        },
        "html");

Mais dans la console JavaScript de Google Chrome, je continue à recevoir cette erreur :

XMLHttpRequest ne peut pas charger file:///C:/xampp/htdocs/webname/resources/templates/signup.php. Les demandes croisées origines ne sont prises en charge que pour le protocole HTTP.

Le problème est que le inscription.php est hébergé sur mon serveur web local, d'où le site web est exécuté, donc il n'y a pas d'inter-domaine.

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

Answer 1

J'ai eu de la chance en démarrant le chrome avec l'interrupteur suivant :

--allow-file-access-from-files

Sur os x, essayez (retapez les tirets si vous faites un copier-coller) :

open -a 'Google Chrome' --args -allow-file-access-from-files

Sur d'autres run *nix (non testé)

 google-chrome  --allow-file-access-from-files

ou sous Windows, modifiez les propriétés du raccourci de chrome et ajoutez le commutateur, par ex.

 C:\ ... \Application\chrome.exe --allow-file-access-from-files

jusqu'à la fin du chemin "cible".

Answer 2

Si vous travaillez sur un petit projet frontal et que vous voulez le tester localement, vous l'ouvrirez généralement en pointant votre répertoire local dans le navigateur Web, par exemple en entrant file:///home/erick/mysuperproject/index.html dans votre barre d'URL. Cependant, si votre site essaie de charger des ressources, même si elles sont placées dans votre répertoire local, vous pouvez voir des avertissements comme celui-ci :

XMLHttpRequest ne peut pas charger file:///home/erick/mysuperproject/mylibrary.js. Les demandes d'origine croisée ne sont prises en charge que pour le protocole HTTP.

Chrome et d'autres navigateurs modernes ont mis en place des restrictions de sécurité pour les requêtes d'origine croisée, ce qui signifie que vous ne pouvez pas charger quoi que ce soit via file:/// , vous devez utiliser le protocole http:// à tout moment, même localement - en raison des politiques de Same Origin. Aussi simple que cela, vous devez monter un serveur web pour y exécuter votre projet.

Ce n'est pas la fin du monde et il existe de nombreuses solutions, notamment le bon vieux Apache (avec VirtualHosts si vous exécutez plusieurs autres projets), node.js avec express, un serveur Ruby, etc. ou simplement la modification des paramètres de votre navigateur.

Cependant, il existe une solution plus simple et plus légère pour les paresseux. Vous pouvez utiliser SimpleHTTPServer de Python. Il est déjà fourni avec Python, vous n'avez donc pas besoin d'installer ou de configurer quoi que ce soit !

Donc cd dans votre répertoire de projet, par exemple

1 cd /home/erick/mysuperprojet et ensuite utiliser simplement

1 python -m SimpleHTTPServer Et c'est tout, vous verrez ce message dans votre terminal

1 Serveur HTTP sur 0.0.0.0 port 8000 ... Vous pouvez maintenant retourner dans votre navigateur et visiter http://0.0.0.0:8000 avec tous vos fichiers de répertoire servis là. Vous pouvez configurer le port et d'autres choses, il suffit de voir la documentation. Mais cette simple astuce fonctionne pour moi lorsque je suis pressé de tester une nouvelle bibliothèque ou de travailler sur une nouvelle idée.

Et voilà, bon codage !

EDITAR: Dans Python 3+, SimpleHTTPServer a été remplacé par http.server. Ainsi, dans Python 3.3, par exemple, la commande suivante est équivalente :

python -m http.server 8000

Answer 3

Vous devez en fait exécuter un serveur web, et faire la requête get vers un URI sur ce serveur, plutôt que de faire la requête get vers un fichier ; par exemple, changez la ligne :

    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",

pour lire quelque chose comme :

    $.get("http://localhost/resources/templates/signup.php",

et la page de demande initiale doit être faite sur http également.

Answer 4

J'obtenais la même erreur en essayant de charger des fichiers HTML simples qui utilisaient des données JSON pour remplir la page, j'ai donc utilisé node.js et express pour résoudre le problème. Si vous n'avez pas installé node, vous devez installer le nœud d'abord.

1. Installer express npm install express

2. Créez un fichier server.js dans le dossier racine de votre projet, dans mon cas un dossier au dessus des fichiers que je voulais serveur

3. Mettez quelque chose comme ce qui suit dans le fichier server.js et lisez ce qui suit sur le site Web de la Commission européenne. express site gihub :

   var express = require('express');
   var app = express();
   var path = require('path');
   
   // __dirname will use the current path from where you run this file 
   app.use(express.static(__dirname));
   app.use(express.static(path.join(__dirname, '/FOLDERTOHTMLFILESTOSERVER')));
   
   app.listen(8000);
   console.log('Listening on port 8000');

4. Après avoir enregistré server.js, vous pouvez exécuter le serveur en utilisant :

node server.js

5. Aller à http://localhost:8000/FILENAME et vous devriez voir le fichier HTML que vous essayiez de charger

Answer 5

Si vous avez installé nodejs, vous pouvez télécharger et installer le serveur en utilisant la ligne de commande :

npm install -g http-server

Changez les répertoires pour le répertoire à partir duquel vous voulez servir les fichiers :

$ cd ~/projects/angular/current_project 

Exécutez le serveur :

$ http-server 

qui produira le message Starting up http-server, serving on :

Disponible sur : http://your_ip:8080 et http://127.0.0.1:8080

Cela vous permet d'utiliser des urls dans votre navigateur comme

http://your_ip:8080/index.html