web-dev-qa-db-fra.com

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

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é à avoir cette erreur dès que j'ai entré une inclusion de product-color.html à l'aide de 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 peut mal se passer? Est-ce un problème de chemin pour product-color.html?

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

javascripthtmlangularjsxmlhttprequest
123
user3422637

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 . Il suffit de lancer npm install http-server -g et vous pourrez l’utiliser dans un terminal comme http-server C:\location\to\app.

293
Kirill Fuchs

TRES SIMPLE FIX

  1. Allez dans votre répertoire d'applications
  2. Démarrer SimpleHTTPServer


Dans le terminal

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

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

47
Chirag

L'opération n'est pas autorisée en chrome. Vous pouvez utiliser un serveur HTTP (Tomcat) ou Firefox à la place.

41
daniel

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

31
Ali Sepehri.Kh

Si vous utilisez ceci dans un navigateur chrome/chrome (par exemple 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 de cmd avec l'indicateur. Cette opération n'est pas autorisée par défaut dans Chrome, Opera et Internet Explorer. Par défaut, cela ne fonctionne que dans Firefox et Safari. Par conséquent, utiliser 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 depuis n'importe quel navigateur.

12
Tejus Prasad

Si, pour une raison quelconque, vous ne pouvez pas héberger les fichiers à partir d'un serveur Web et avez toujours besoin d'un moyen de charger les partiels, vous pouvez utiliser la directive ngTemplate. 

De cette façon, vous pouvez inclure votre balise dans les balises de script dans votre fichier index.html sans avoir à l'inclure dans la directive.

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'
      };
   }
  );
11
link64

Cause première:

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

Solution 1:

utilisez le protocole http au lieu du fichier, ce qui signifie: configurez un serveur http, tel que 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

 enter image description here

Solution 3:

utilisez plutôt Firefox

5
Timothy.Li

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

3
bullettrain

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

2
Edison D'souza

La raison

Vous n'ouvrez pas la page via un serveur, tel qu'Apache. Ainsi, lorsque le navigateur tente d'obtenir la ressource, il pense qu'il s'agit 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 comme http: // localhost: numéro_port/PageName.html ou via un serveur Web tel qu'Apache, nginx, node, etc.

Vous pouvez également utiliser un autre navigateur. Aucune erreur n’a été signalée lors de l’ouverture directe de la page avec Firefox et Safari. Il vient uniquement pour Chrome et IE (xx). 

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

1
Virendra Shenvi Velingkar
  1. Installez le serveur http en exécutant la commande npm install http-server -g
  2. Ouvrez le terminal dans le chemin où se trouve l'index.html
  3. Exécuter la commande http-server . -o
  4. Profitez-en!
1
Michael Horta Fleitas

il y a une extension chrome 200ok c'est un serveur web pour chrome, ajoutez-le et sélectionnez votre dossier

1
gaurav moolani

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 d'analyse XML dans IE. Dans Chrome, vous devriez l'ouvrir dans un serveur comme Apache ou XAMPP.

1
Shantha Moorthy K

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

0
etoricky

En ajoutant à l'excellente solution de @Kirill Fuchs et en répondant au doute de @ StackUser - lors du démarrage du serveur http, définissez le chemin jusqu'au dossier de l'application uniquement, PAS jusqu'à la page HTML! http-server C:\location\to\app et accès index.html sous le dossier app

0
Teejay

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

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

0
Manas