XMLHttpRequest ne peut pas charger le fichier. Les demandes d'origine croisée ne sont prises en charge que pour HTTP

Je reçois l'erreur suivante:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

Je me rends compte que cette question a déjà reçu une réponse, mais je n'ai toujours pas trouvé de solution à mon problème. J'ai essayé de courir à chrome.exe --allow-file-access-from-filespartir de l'invite de commande et déplacé le fichier vers le système de fichiers local, mais j'obtiens toujours la même erreur.

J'apprécie toutes les suggestions!

Si vous faites quelque chose comme écrire du HTML et du Javascript dans un éditeur de code sur votre ordinateur personnel et tester la sortie dans votre navigateur, vous obtiendrez probablement des messages d'erreur à propos de Cross Origin Requests. Votre navigateur affichera le HTML et exécutera Javascript, jQuery, angularJs dans votre navigateur sans avoir besoin d'un serveur configuré. Mais de nombreux navigateurs Web sont programmés pour surveiller les attaques intersites et bloqueront les requêtes. Vous ne voulez pas que n'importe qui puisse lire votre disque dur à partir de votre navigateur Web. Vous pouvez créer une page Web entièrement fonctionnelle en utilisant Notepad ++ qui exécutera Javascript et des frameworks comme jQuery et angularJs; et testez tout simplement en utilisant l'élément de menu Notepad ++,RUN, LAUNCH IN FIREFOX. C'est un moyen simple et agréable de commencer à créer une page Web, mais lorsque vous commencez à créer autre chose que la mise en page, le CSS et la navigation simple dans les pages, vous avez besoin d'un serveur local configuré sur votre ordinateur.

Voici quelques options que j'utilise.

1. Testez votre page Web localement sur Firefox, puis déployez-la sur votre hôte.
2. ou: exécuter un serveur local

Tester sur Firefox, déployer vers l'hôte

1. Firefox autorise actuellement les requêtes Cross Origin à partir de fichiers servis depuis votre disque dur
2. Votre site d'hébergement Web autorisera les demandes de fichiers dans des dossiers tels que configurés par le fichier manifeste

Exécutez un serveur local

• Exécutez un serveur sur votre ordinateur, comme Apache ou Python
• Python n'est pas un serveur, mais il exécutera un serveur simple

Exécuter un serveur local avec Python

Obtenez votre adresse IP:

• Sous Windows: ouvrez l'invite de commande. Tous les programmes, accessoires, invite de commandes
• Je lance toujours le Command Promptsous Administrator. Cliquez avec le bouton droit sur l' Command Promptélément de menu et recherchezRun As Administrator
• Tapez la commande: ipconfiget appuyez sur Entrée.
• Recherchez: Adresse IPv4. . . . . . . . 12.123.123.00
• Il existe des sites Web qui afficheront également votre adresse IP

Si vous n'avez pas Python, téléchargez-le et installez-le.

À l'aide de «l'invite de commande», vous devez accéder au dossier contenant les fichiers que vous souhaitez servir de page Web.

• Si vous avez besoin de revenir au répertoire C: \ Root - tapez cd /
• tapez cd Drive: \ Folder \ Folder \ etc pour accéder au dossier où se trouve votre fichier .Html (ou php, etc.)
• Vérifiez le chemin. tapez: chemin à l'invite de commande. Vous devez voir le chemin d'accès au dossier où se trouve python. Par exemple, si python est dans C: \ Python27, vous devez voir cette adresse dans les chemins répertoriés.
• Si le chemin du répertoire Python ne figure pas dans le chemin, vous devez définir le chemin. tapez: chemin d'aide et appuyez sur Entrée. Vous verrez de l'aide pour le chemin.
• Tapez quelque chose comme: chemin c: \ python27% chemin%
• % path% conserve tous vos chemins actuels. Vous ne voulez pas effacer tous vos chemins actuels, ajoutez simplement un nouveau chemin.
• Créez le nouveau chemin À PARTIR du dossier dans lequel vous souhaitez servir les fichiers.
• Démarrez le serveur Python: Tapez: python -m SimpleHTTPServer portoù 'port' est le numéro du port souhaité, par exemplepython -m SimpleHTTPServer 1337
• Si vous laissez le port vide, le port par défaut est 8000
• Si le serveur Python démarre correctement, vous verrez un msg.

Exécutez votre application Web localement

• Ouvrez un navigateur
• Dans le type de ligne d'adresse: http://your IP address:port
• http://xxx.xxx.x.x:1337 ou http://xx.xxx.xxx.xx:8000pour la valeur par défaut
• Si le serveur fonctionne, vous verrez une liste de vos fichiers dans le navigateur
• Cliquez sur le fichier que vous souhaitez diffuser et il devrait s'afficher.

Des solutions plus avancées

• Installez un éditeur de code, un serveur Web et d'autres services intégrés.

Vous pouvez installer Apache, PHP, Python, SQL, les débogueurs, etc. tous séparément sur votre machine, puis passer beaucoup de temps à essayer de comprendre comment les faire tous fonctionner ensemble, ou rechercher une solution qui combine toutes ces choses.

J'aime utiliser XAMPP avec NetBeans IDE. Vous pouvez également installer WAMP qui permet User Interfacede gérer et d'intégrer Apache et d'autres services.

Solution simple

Si vous travaillez avec des fichiers html / js / css purs.

Installez cette petite application serveur ( lien ) dans Chrome. Ouvrez l'application et pointez l'emplacement du fichier vers le répertoire de votre projet.

Accédez à l'url affichée dans l'application.

Edit: Solution plus intelligente utilisant Gulp

Étape 1: Pour installer Gulp. Exécutez la commande suivante dans votre terminal.

npm install gulp-cli -g
npm install gulp -D

Étape 2: Dans le répertoire de votre projet, créez un fichier nommé gulpfile.js. Copiez le contenu suivant à l'intérieur.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

Étape 3: Installez le plugin gulp de synchronisation du navigateur. Dans le même répertoire où gulpfile.js est présent, exécutez la commande suivante

npm install browser-sync gulp --save-dev

Étape 4: Démarrez le serveur. Dans le même répertoire où gulpfile.js est présent, exécutez la commande suivante

gulp serve

Cette erreur se produit parce que vous ouvrez simplement des documents html directement à partir du navigateur. Pour résoudre ce problème, vous devrez servir votre code à partir d'un serveur Web et y accéder sur localhost. Si vous avez une configuration Apache, utilisez-la pour servir vos fichiers. Certains IDE ont des serveurs Web intégrés, comme JetBrains IDE, Eclipse ...

Si vous avez configuré Node.Js, vous pouvez utiliser le serveur http . Exécutez simplement npm install http-server -get vous pourrez l'utiliser dans un terminal comme http-server C:\location\to\app. Kirill Fuchs

Pour ajouter à la réponse élaborée d' Alan Wells , voici une solution rapide

Exécutez un serveur local

vous pouvez servir n'importe quel dossier de votre ordinateur avec Serve

Tout d'abord, naviguez en utilisant la ligne de commande dans le dossier que vous souhaitez servir.

ensuite

npx i -g serve
serve

ou si vous souhaitez tester Serve en le téléchargeant

npx serve

et c'est tout! Vous pouvez afficher vos fichiers sur http: // localhost: 5000

J'étais confronté à cette erreur lors du déploiement de mon projet API Web localement et j'appelais le projet API uniquement avec cette URL donnée ci-dessous:

localhost // myAPIProject

Puisque le message d'erreur indique que ce n'est pas http: //, j'ai changé l'URL et mis un préfixe http comme indiqué ci-dessous et l'erreur a disparu.

http: // localhost // myAPIProject

Si vous utilisez l' IDE Javascript de WebStorm , vous pouvez simplement ouvrir votre projet depuis WebStorm dans votre navigateur. WebStorm démarrera automatiquement un serveur et vous n'obtiendrez plus aucune de ces erreurs, car vous accédez maintenant aux fichiers avec les protocoles autorisés / pris en charge (HTTP).

Dépend de vos besoins, mais il existe également un moyen rapide de vérifier temporairement votre (factice) JSON en enregistrant votre JSON sur http://myjson.com . Copiez le lien de l'API et collez-le dans votre code javascript. Alto! Lorsque vous souhaitez déployer les codes, vous ne devez pas oublier de changer cette url dans vos codes!

Placez votre dossier de projet dans les htdocs du répertoire Xampp Démarrez votre serveur Apache à l'aide du panneau de configuration xampp puis ouvrez un navigateur goto localhost / projectfolder puis il commence à fonctionner