wake-up-neo.net

AngularJS-Fehler: Cross Origin-Anforderungen werden nur für Protokollschemas unterstützt: http, data, chrome-extension, https

Ich habe drei Dateien einer sehr einfachen eckigen Js-Anwendung

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"
              }
  ];

})();

Ich habe diese Fehlermeldung erhalten, sobald ich ein Include von product-color.html mit einer benutzerdefinierten Anweisung namens productColor eingegeben habe:

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

Was kann schief gehen? Ist es ein Pfadproblem für product-color.html?

Alle meine drei Dateien befinden sich im selben Stammordner C:/user/project/

123
user3422637

Dieser Fehler tritt auf, weil Sie HTML-Dokumente direkt über den Browser öffnen. Um dies zu beheben, müssen Sie Ihren Code von einem Webserver aus bereitstellen und über localhost darauf zugreifen. Wenn Sie Apache eingerichtet haben, verwenden Sie es, um Ihre Dateien bereitzustellen. Einige IDEs verfügen über integrierte Webserver, wie JetBrains IDEs, Eclipse ...

Wenn Sie Node.Js eingerichtet haben, können Sie http-server verwenden. Führen Sie einfach npm install http-server -g aus und Sie können es in Terminals wie http-server C:\location\to\app verwenden.

293
Kirill Fuchs

SEHR EINFACHE FIX

  1. Gehen Sie in Ihr App-Verzeichnis
  2. Starten Sie SimpleHTTPServer


.__ Im Terminal

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Gehen Sie jetzt in Ihrem Browser zu localhost: 8000 und die Seite wird angezeigt

47
Chirag

Die Bedienung ist in Chrom nicht erlaubt. Sie können entweder einen HTTP-Server (Tomcat) oder stattdessen Firefox verwenden.

41
daniel

Mein Problem wurde durch Hinzufügen von http:// zu meiner URL-Adresse . Gelöst. Zum Beispiel habe ich http://localhost:3000/movies anstelle von localhost:3000/movies verwendet.

31
Ali Sepehri.Kh

Wenn Sie dies im Chrom/Chrom-Browser (z. B. in Ubuntu 14.04) verwenden, können Sie einen der folgenden Befehle verwenden, um dieses Problem zu beheben. 

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

Dadurch können Sie die Datei in Chrom oder Chrom laden. Wenn Sie denselben Vorgang für Windows ausführen müssen, können Sie diese Option in den Eigenschaften der Chrome-Verknüpfung hinzufügen oder sie mit der Markierung von cmd ausführen. Dieser Vorgang ist in Chrome, Opera und Internet Explorer standardmäßig nicht zulässig. Standardmäßig funktioniert es nur in Firefox und Safari. Daher wird die Verwendung dieses Befehls Ihnen helfen.

Alternativ können Sie es auch auf jedem Webserver hosten (Beispiel: Tomcat-Java, NodeJS-JS, Tornado-Python usw.), je nachdem, in welcher Sprache Sie sich wohl fühlen. Dies funktioniert von jedem Browser aus.

12
Tejus Prasad

Wenn Sie aus irgendeinem Grund nicht die Dateien von einem Webserver hosten lassen und dennoch eine Art Laden von Partials benötigen, können Sie auf die Anweisung ngTemplate zurückgreifen.

Auf diese Weise können Sie Ihr Markup in Skript-Tags in Ihrer index.html-Datei einfügen und müssen das Markup nicht als Teil der eigentlichen Direktive einfügen.

Fügen Sie dies zu Ihrer index.html hinzu

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

Dann in Ihrer Direktive:

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

Ursache:

Das Dateiprotokoll unterstützt keine Cross Origin-Anforderung für Chrome

Lösung 1:

verwenden Sie das http-Protokoll anstelle der Datei. Dies bedeutet, dass Sie einen http-Server wie Apache oder nodejs + http-server einrichten

Anmerkung 2:

Fügen Sie --allow-file-access-from-files Nach dem Verknüpfungsziel von Chrome hinzu und öffnen Sie die neue Browse-Instanz mit dieser -Verknüpfung

 enter image description here

Lösung 3:

verwenden Sie stattdessen Firefox

5
Timothy.Li

Ich würde hinzufügen, dass man auch xampp, mamp type of things verwenden kann, und das Projekt in den Ordner htdocs stellen kann, damit es auf localhost verfügbar ist

3
bullettrain

Wenn Sie bereits Server ausführen, vergessen Sie nicht, http: // im API-Aufruf zu verwenden. Dies kann zu ernsthaften Problemen führen.

2
Edison D'souza

Der Grund

Sie öffnen die Seite nicht über einen Server wie Apache. Wenn der Browser also versucht, die Ressource abzurufen, scheint er von einer separaten Domäne zu sein, was nicht zulässig ist. Einige Browser erlauben es jedoch.

Die Lösung

Führen Sie inetmgr aus und hosten Sie Ihre Seite lokal, und navigieren Sie zu http: // localhost: portnummer/PageName.html oder durch einen Webserver wie Apache, nginx, node usw.

Alternativ können Sie einen anderen Browser verwenden. Es wurde kein Fehler angezeigt, wenn Sie die Seite direkt mit Firefox und Safari öffnen. Es kommt nur für Chrome und IE (xx). 

Wenn Sie Code-Editoren wie Brackets, Sublime oder Notepad ++ verwenden, behandeln diese Apps diesen Fehler automatisch.

  1. Installieren Sie den http-Server, indem Sie den Befehl npm install http-server -g ausführen.
  2. Öffnen Sie das Terminal in dem Pfad, in dem sich die index.html befindet
  3. Befehl ausführen http-server . -o
  4. Geniesse es!

es gibt eine Chrome-Erweiterung 200ok. Es ist ein Webserver für Chrome, den Sie einfach hinzufügen und Ihren Ordner auswählen

1
gaurav moolani

Dieses Problem tritt in Firefox und Safari nicht auf. Stellen Sie sicher, dass Sie die neueste Version von xml2json.js verwenden. Weil ich den XML-Parser-Fehler im IE hatte. In Chrome sollten Sie es am besten auf Servern wie Apache oder XAMPP öffnen.

1

Navigieren Sie zu C: /user/project/index.html, öffnen Sie es mit Visual Studio 2017, Datei> Im Browser anzeigen, oder drücken Sie Strg + Umschalt + W

0
etoricky

Hinzufügen zu @Kirill Fuchs ausgezeichneter Lösung und Beantwortung der Zweifel von @ StackUser - Legen Sie beim Starten des http-Servers den Pfad nur bis zum App-Ordner fest, NICHT bis zur HTML-Seite! http-server C:\location\to\app und greifen Sie auf index.html im Ordner app zu

0
Teejay

Sie müssen Chrome mit dem folgenden Flag öffnen Gehen Sie zum Ausführungsmenü und geben Sie .__ ein.

Stellen Sie sicher, dass alle Fälle von Chrome geschlossen sind, bevor Sie die Flagge zum Öffnen von Chrome verwenden. Sie erhalten eine Sicherheitswarnung, die besagt, dass CORS aktiviert ist.

0
Manas