Les demandes d'origine croisée ne sont prises en charge que pour HTTP, mais ce n'est pas entre domaines

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 de la console JavaScript de Google Chrome, je continue de recevoir cette erreur:

XMLHttpRequest ne peut pas charger le fichier: /// C: /xampp/htdocs/webname/resources/templates/signup.php. Les demandes d'origine croisée ne sont prises en charge que pour HTTP.

Le problème est que le fichier signup.php est hébergé sur mon serveur Web local à partir duquel tout le site Web est exécuté, donc ce n'est pas inter-domaine.

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

Vous devez exécuter un serveur Web et envoyer la requête get à un URI sur ce serveur, plutôt que de faire la requête get à un fichier; par exemple changer 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 également être créée via http.

J'ai eu de la chance en démarrant Chrome avec le commutateur suivant:

--allow-file-access-from-files

Sur os x essayez (retapez les tirets si vous copiez-collez):

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

Sur une autre exécution * nix (non testée)

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

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

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

à la fin du chemin "cible"

Si vous travaillez sur un petit projet frontal et que vous souhaitez 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 le fichier: ///home/erick/mysuperproject/mylibrary.js. Les demandes d'origine croisée ne sont prises en charge que pour HTTP.

Chrome et d'autres navigateurs modernes ont mis en œuvre des restrictions de sécurité pour les requêtes Cross Origin, ce qui signifie que vous ne pouvez rien charger via file: ///, vous devez utiliser le protocole http: // à tout moment, même localement en raison des politiques de même origine. Aussi simple que cela, vous auriez besoin de monter un serveur Web pour y exécuter votre projet.

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

Cependant, il existe une solution plus simple et 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 le répertoire de votre projet, par exemple

1 cd / home / erick / mysuperproject puis utilisez simplement

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

1 Servant HTTP sur le port 0.0.0.0 8000 ... Vous pouvez maintenant revenir à votre navigateur et visiter http://0.0.0.0:8000tous vos fichiers de répertoire qui y sont servis. Vous pouvez configurer le port et d'autres choses, il suffit de consulter la documentation. Mais cette astuce fonctionne simplement pour moi lorsque je suis pressé de tester une nouvelle bibliothèque ou de trouver une nouvelle idée.

Et voilà, bon codage!

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

J'obtenais la même erreur en essayant de charger simplement des fichiers HTML 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 aucun nœud n'est installé, vous devez d'abord installer le nœud .

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 sujet sur le site express 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. Accédez à http://localhost:8000/FILENAMEet vous devriez voir le fichier HTML que vous essayiez de charger

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

npm install -g http-server

Remplacez les répertoires par le répertoire à partir duquel vous souhaitez servir les fichiers:

$ cd ~/projects/angular/current_project 

Exécutez le serveur:

$ http-server 

qui produira le message Démarrage du serveur http, servant sur:

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

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

http: // votre_ip: 8080 / index.html

Cela fonctionne mieux de cette façon. Assurez-vous que les deux fichiers se trouvent sur le serveur. Lorsque vous appelez la page html, utilisez l'adresse Web comme:, http:://localhost/myhtmlfile.htmlet non C::///users/myhtmlfile.html,. Assurez-vous également que l'url passée au json est une adresse Web comme indiqué ci-dessous:

$(function(){
                $('#typeahead').typeahead({
                    source: function(query, process){
                        $.ajax({
                            url: 'http://localhost:2222/bootstrap/source.php',
                            type: 'POST',
                            data: 'query=' +query,
                            dataType: 'JSON',
                            async: true,
                            success: function(data){
                                process(data);
                            }
                        });
                    }
                });
            });

REM kill all existing instance of chrome 
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files

1. changez le chemin chromeLocation avec le vôtre.

2. enregistrer ci-dessus en tant que fichier .bat.

3. faites glisser et déposez votre fichier sur le fichier de commandes que vous avez créé. (Chrome donne l'option de restauration des pages, donc si vous avez des pages ouvertes, appuyez simplement sur Restaurer et cela fonctionnera)

Vous pouvez également démarrer un serveur sans python à l'aide de l'interpréteur php.

Par exemple:

cd /your/path/to/website/root
php -S localhost:8000

Cela peut être utile si vous voulez une alternative à npm, car l'utilitaire php est préinstallé sur certains systèmes d'exploitation (y compris Mac).

Pour tous les utilisateurs de python:

Accédez simplement à votre dossier de destination dans le terminal.

cd projectFoder

puis démarrez le serveur HTTP Pour Python3 +:

python -m http.server 8000

Servir HTTP sur :: port 8000 (http: // [::]: 8000 /) ...

allez sur votre lien: http://0.0.0.0:8000/

Prendre plaisir :)