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/


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


Réponses:


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.


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

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


Dans le terminal

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

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


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.


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.


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.


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

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

entrez la description de l'image ici

Solution 3:

utilisez plutôt Firefox


Utiliser Firefox m'a aidé
Vineeth Subbaraya

5
  1. Installez le serveur http, exécutez 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!

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


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.


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.


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.


1

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


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é.


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


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


-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());
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.