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

Question

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é d'exécuter chrome.exe --allow-file-access-from-files à partir de la commande Invite et j'ai 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!

Sandy Good · Accepted Answer

Si vous écrivez du HTML et du Javascript dans un éditeur de code sur votre ordinateur personnel et testez la sortie dans votre navigateur, vous obtiendrez probablement des messages d'erreur concernant Cross Origin Requests. Votre navigateur rendra le code HTML et exécutera Javascript, jQuery, angularJs dans votre navigateur sans qu'il soit nécessaire de configurer un serveur. Cependant, de nombreux navigateurs Web sont programmés pour surveiller les attaques entre sites et bloquent les demandes. 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 à l'aide de Notepad ++ qui exécutera Javascript et des cadres tels que jQuery et angularJs; et tout tester 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 présentation, les CSS et la navigation simple, vous avez besoin d’un serveur local configuré sur votre ordinateur.

Voici quelques options que j'utilise.

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

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

Firefox autorise actuellement les demandes d'origine croisée à partir de fichiers provenant de votre disque dur.
Votre site d'hébergement Web autorisera les demandes de fichiers dans des dossiers tels que configurés par le fichier manifeste.

Exécuter 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 commande
Je lance toujours le Command Prompt comme Administrator. Faites un clic droit sur l'élément de menu Command Prompt et cherchez Run As Administrator
Tapez la commande: ipconfig et 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.

A l'aide de l'invite de commande, vous devez vous rendre dans le dossier contenant les fichiers que vous souhaitez utiliser comme page Web.

Si vous devez 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. type: chemin à l'invite de commande. Vous devez voir le chemin du dossier où se trouve python. Par exemple, si python se trouve dans C:\Python27, vous devez voir cette adresse dans les chemins répertoriés.
Si le chemin d'accès au répertoire Python ne se trouve pas dans le chemin, vous devez définir le chemin. tapez: help path et appuyez sur Entrée. Vous verrez 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 voulez servir les fichiers.
Démarrez le serveur Python: Tapez: python -m SimpleHTTPServer port où 'port' correspond au numéro du port souhaité, par exemple python -m SimpleHTTPServer 1337.
Si vous laissez le port vide, le port 8000 est utilisé par défaut
Si le serveur Python démarre correctement, un message s'affiche.

Exécuter votre application Web localement

Ouvrir un navigateur
Dans la ligne d'adresse, tapez: http://your IP address:port
http://xxx.xxx.x.x:1337 ou http://xx.xxx.xxx.xx:8000 pour 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 voulez servir 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, Debuggers, etc. séparément sur votre ordinateur, puis passer beaucoup de temps à essayer de comprendre comment les faire fonctionner ensemble ou à rechercher une solution combinant tous ces éléments.

J'aime utiliser XAMPP avec NetBeans IDE. Vous pouvez également installer WAMP, qui fournit un User Interface pour gérer et intégrer Apache et d’autres services.

Sushant Kr · Answer

Solution simple

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

Installez cette petite application serveur ( link ) en chrome. Ouvrez l'application et pointez l'emplacement du fichier sur le répertoire de votre projet.

Allez à l'URL affichée dans l'application.

Edit: Une 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 plug-in de synchronisation du navigateur Sync gulp. Dans le même répertoire que gulpfile.js, exécutez la commande suivante

npm install browser-sync gulp --save-dev

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

gulp serve

MEAbid · Answer

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

Si vous avez configuré Node.Js, vous pouvez utiliser serveur_ HTTP . Lancez simplement npm install http-server -g et vous pourrez l’utiliser dans un terminal comme http-server C:\location\to\app.Kirill Fuchs

Si vous avez configuré Node.Js, vous pouvez utiliser serveur_ HTTP . Lancez simplement npm install http-server -g et vous pourrez l’utiliser dans un terminal comme http-server C:\location o\app. Kirill Fuchs

Usman · Answer

Je faisais face à cette erreur lorsque j'ai déployé mon projet d'API Web localement et que j'appelais un projet d'API uniquement avec l'URL indiquée ci-dessous:

localhost // myAPIProject

Étant donné que le message d'erreur indique qu'il ne s'agit pas de http: //, j'ai modifié l'URL et mis un préfixe http comme indiqué ci-dessous; l'erreur a disparu.