Erreur AngularJS: les demandes d'origine croisée ne sont prises en charge que pour les schémas de protocole: http, données, extension chrome, https

130

J'ai trois fichiers d'une application js angulaire très simple

index.html

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script>
    <script type="text/javascript" src="app.js"></script>
  </head>

  <body ng-controller="StoreController as store">
      <div class="list-group-item" ng-repeat="product in store.products">
        <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>
      </div>

  <product-color></product-color>
  </body>
</html>

product-color.html

<div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>

app.js

(function() {
  var app = angular.module('gemStore', []);

  app.controller('StoreController', function($http){
              this.products = gem;
          }
  );

  app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          templateUrl: 'product-color.html'
      };
   }
  );

  var gem = [
              {
                  name: "Shirt",
                  price: 23.11,
                  color: "Blue"
              },
              {
                  name: "Jeans",
                  price: 5.09,
                  color: "Red"
              }
  ];

})();

J'ai commencé à recevoir cette erreur dès que j'ai entré une inclusion de product-color.html en utilisant la directive personnalisée nommée productColor:

XMLHttpRequest cannot load file:///C:/product-color.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/product-color.html'.

Qu'est-ce qui ne va pas? S'agit-il d'un problème de chemin pour product-color.html?

Tous mes trois fichiers sont dans le même dossier racine C:/user/project/

javascript html angularjs xmlhttprequest utilisateur3422637
la source

1

Juste un petit indicateur que si vous faites quelque chose de stupide, comme dans mon cas, j'ai accidentellement ajouté le TLD au port: " localhost: 8070.com ", vous recevrez la même erreur. Vérifiez l'URL que vous essayez de résoudre!

Wildhoney

Peut-être similaire ici: stackoverflow.com/questions/10752055/…

Ngô Đức Tuấn

Possibilité de duplication de "Les demandes d'origine croisée ne sont prises en charge que pour HTTP" erreur lors du chargement d'un fichier local

306

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
la source

6

Excellente solution!

Jorge

3

Le serveur http est le moyen le plus simple que j'ai vu pour l'hébergement local. Remarque: Si vous n'avez pas npm sur Windows, installez simplement node.js et il deviendra disponible dans cmd.

Octane

3

Et si cela s'est produit dans Webview sous Android, que dois-je faire !?

Dr.jacky

2

Par curiosité, pourquoi n'est-il pas possible d'ouvrir simplement les fichiers dans le navigateur Web?

tobiak777

3

@reddy Clair et simple: c'est un problème de sécurité pour le navigateur d'accéder au système de fichiers directement sur votre ordinateur.

Alex J

49

CORRECTIF TRÈS SIMPLE

Accédez à votre répertoire d'applications
Démarrez SimpleHTTPServer

Dans le terminal

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Maintenant, allez à localhost: 8000 dans votre navigateur et la page s'affichera

Chirag
la source

8

Dans Python 3, ça devrait être python -m http.server.

Luan Nico

1

Cela a beaucoup aidé! Excellente solution.

mirta

42

L'opération n'est pas autorisée dans Chrome. Vous pouvez soit utiliser un serveur HTTP (Tomcat), soit utiliser Firefox à la place.

Daniel
la source

4

J'ai utilisé Firefox à la place dans ma situation et cela fonctionne. Chrome offre-t-il plus de sécurité que Firefox? Pourquoi suis-je autorisé à faire ça ....

thatOneGuy

C'est la meilleure réponse pour moi.

Thomas

1

Bref et simple ... a fonctionné!

viks le

m'a vraiment aidé aussi.

Ram Dutt Shukla

1

Hé..merci beaucoup ... ta réponse a été d'une si grande aide ... m'a permis de gagner beaucoup de temps

Megha

31

Mon problème a été résolu simplement en ajoutant http://à mon adresse URL. par exemple, j'ai utilisé à la http://localhost:3000/moviesplace de localhost:3000/movies.

Ali Sepehri.Kh
la source

13

Si vous l'utilisez dans un navigateur chrome / chrome (ex: dans Ubuntu 14.04), vous pouvez utiliser l'une des commandes ci-dessous pour résoudre ce problème.

ThinkPad-T430:~$ google-chrome --allow-file-access-from-files
ThinkPad-T430:~$ google-chrome --allow-file-access-from-files fileName.html

ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files
ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files fileName.html

Cela vous permettra de charger le fichier en chrome ou en chrome. Si vous devez effectuer la même opération pour Windows, vous pouvez ajouter ce commutateur dans les propriétés du raccourci Chrome ou l'exécuter à partir cmdde l'indicateur. Cette opération n'est pas autorisée dans Chrome, Opera, Internet Explorer par défaut. Par défaut, cela ne fonctionne que dans Firefox et Safari. Par conséquent, l'utilisation de cette commande vous aidera.

Vous pouvez également l'héberger sur n'importe quel serveur Web (exemple: Tomcat-java, NodeJS-JS, Tornado-Python, etc.) en fonction de la langue avec laquelle vous êtes à l'aise. Cela fonctionnera à partir de n'importe quel navigateur.

Tejus Prasad
la source

12

Si, pour une raison quelconque, vous ne pouvez pas héberger les fichiers à partir d'un serveur Web et avez encore besoin d'une sorte de moyen de charger les partiels, vous pouvez recourir à la ngTemplatedirective.

De cette façon, vous pouvez inclure votre balisage dans des balises de script dans votre fichier index.html et ne pas avoir à inclure le balisage dans le cadre de la directive réelle.

Ajoutez ceci à votre index.html

<script type='text/ng-template' id='tpl-productColour'>
 <div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>
</script>

Ensuite, dans votre directive:

app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          //template: 'tpl-productColour'
          templateUrl: 'tpl-productColour'
      };
   }
  );

link64
la source

Comme j'ai déjà édité ce message, utilisez templateUrl: 'tpl-productColor'

HANU

5

Cause première:

Le protocole de fichier ne prend pas en charge la demande d'origine croisée pour Chrome

Solution 1:

utiliser le protocole http au lieu du fichier, ce qui signifie: configurer un serveur http, tel qu'apache, ou nodejs + http-server

Sotution 2:

Ajoutez --allow-file-access-from-files après la cible de raccourci de Chrome et ouvrez une nouvelle instance de navigation à l'aide de ce raccourci

Solution 3:

utilisez plutôt Firefox

Timothy.Li
la source

Utiliser Firefox m'a aidé

Vineeth Subbaraya

5

Installez le serveur http, exécutez la commande npm install http-server -g
Ouvrez le terminal dans le chemin où se trouve l'index.html
Exécuter la commande http-server . -o
Profitez-en!

Michael Horta Fleitas
la source

4

J'ajouterais qu'on peut aussi utiliser xampp, type de choses mamp et mettre votre projet dans le dossier htdocs pour qu'il soit accessible sur localhost

bullettrain
la source

2

Si vous utilisez déjà le serveur, n'oubliez pas d'utiliser http: // dans l'appel d'API. Cela pourrait causer de sérieux problèmes.

Edison D'souza
la source

Merci mec, deux heures à la recherche d'une solution au même problème et était-ce ...

Santi Nunez

Bienvenue frere. Happy Coding :)

Edison D'souza

1

La raison

Vous n'ouvrez pas la page via un serveur, comme Apache, donc lorsque le navigateur tente d'obtenir la ressource, il pense qu'elle provient d'un domaine séparé, ce qui n'est pas autorisé. Bien que certains navigateurs le permettent.

La solution

Exécutez inetmgr et hébergez votre page localement et naviguez en tant que http: // localhost: portnumber / PageName.html ou via un serveur Web comme Apache, nginx, node, etc.

Vous pouvez également utiliser un autre navigateur Aucune erreur n'a été affichée lors de l'ouverture directe de la page à l'aide de Firefox et Safari. Il n'est disponible que pour Chrome et IE (xx).

Si vous utilisez des éditeurs de code tels que Brackets, Sublime ou Notepad ++, ces applications gèrent cette erreur automatiquement.

Virendra Shenvi Velingkar
la source

1

Ce problème ne se produit pas dans Firefox et Safari. Assurez-vous que vous utilisez la dernière version de xml2json.js. Parce que j'ai fait face à l'erreur de l'analyseur XML dans IE. Dans Chrome, vous devez l'ouvrir sur un serveur comme Apache ou XAMPP.

Shantha Moorthy K
la source

1

il y a une extension chrome 200ok, c'est un serveur Web pour chrome, ajoutez simplement cela et sélectionnez votre dossier

gaurav moolani
la source

Excellente solution

Mohamed Adel

0

Vous devez ouvrir Chrome en utilisant l'indicateur suivant Allez dans le menu Exécuter et tapez "chrome --disable-web-security --user-data-dir"

Assurez-vous que toutes les instances de chrome sont fermées avant d'utiliser l'indicateur pour ouvrir chrome. Vous recevrez un avertissement de sécurité indiquant que CORS est activé.

Manas
la source

0

Ajouter à @Kirill Fuchs une excellente solution et répondre au doute de @ StackUser - lors du démarrage du serveur http, définissez le chemin jusqu'au dossier de l'application uniquement, PAS avant la page html! http-server C:\location\to\appet accès index.htmlsous appdossier

Tejaswini
la source

0

Accédez à C: /user/project/index.html, ouvrez-le avec Visual Studio 2017, Fichier> Afficher dans le navigateur ou appuyez sur Ctrl + Maj + W

etoricky
la source

-1

J'ai eu le même problème. après avoir ajouté le code ci-dessous à mon fichier app.js, il a été corrigé.

var cors = require('cors')
app.use(cors());

Surendra Parchuru
la source

Erreur AngularJS: les demandes d'origine croisée ne sont prises en charge que pour les schémas de protocole: http, données, extension chrome, https

Réponses: