AngularJS-Fehler: Ursprungsübergreifende Anforderungen werden nur für Protokollschemata unterstützt: http, data, chrome-extension, https

130

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 diesen Fehler erhalten, sobald ich ein Include von product-color.html mit der benutzerdefinierten Direktive 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/

javascript html angularjs xmlhttprequest user3422637
quelle
1
Nur ein kurzer Hinweis: Wenn Sie etwas Dummes tun, wie in meinem Fall, habe ich versehentlich die TLD an den Port " localhost: 8070.com " angehängt , wird derselbe Fehler angezeigt . Überprüfen Sie, welche URL Sie auflösen möchten!
Wildhoney
Vielleicht ähnlich hier: stackoverflow.com/questions/10752055/…
Ngô Đức Tuấn
Mögliches Duplikat von "Ursprungsübergreifende Anforderungen werden nur für HTTP unterstützt." Fehler beim Laden einer lokalen Datei

Antworten:

306

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

Wenn Sie Node.Js eingerichtet haben, können Sie den http-Server verwenden . Einfach ausführen npm install http-server -gund Sie können es in Terminal wie verwenden http-server C:\location\to\app.

Kirill Fuchs
quelle
6
Hervorragende Lösung!
Jorge
3
Der http-Server ist die einfachste Art, lokal zu hosten. Hinweis: Wenn Sie unter Windows kein npm haben, installieren Sie einfach node.js und es wird in cmd verfügbar.
Oktan
3
Und wenn es in Webview in Android passiert ist, was soll ich tun?
Dr. Jacky
2
Warum ist es aus Neugier nicht möglich, die Dateien einfach im Webbrowser zu öffnen?
tobiak777
3
@reddy Schlicht und einfach: Es ist ein Sicherheitsproblem für den Browser, direkt auf Ihrem Computer auf das Dateisystem zuzugreifen.
Alex J
49

SEHR EINFACHES FIX

  1. Gehen Sie zu Ihrem 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

Chirag
quelle
8
In Python 3 sollte es sein python -m http.server.
Luan Nico
1
Das hat sehr geholfen! Tolle Lösung.
Mirta
42

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

Daniel
quelle
4
Ich habe stattdessen Firefox in meiner Situation verwendet und es funktioniert. Hat Chrome mehr Sicherheit als Firefox? Warum darf ich das tun ...
thatOneGuy
Das ist die beste Antwort für mich.
Thomas
1
Kurz und einfach ... hat funktioniert!
Viks
hat mir auch sehr geholfen.
Ram Dutt Shukla
1
Hey ... vielen Dank ... Ihre Antwort war eine große Hilfe ... hat so viel Zeit gespart
Megha
31

Mein Problem wurde durch Hinzufügen http://zu meiner URL-Adresse behoben . zum Beispiel habe ich http://localhost:3000/moviesstatt localhost:3000/movies.

Ali Sepehri.Kh
quelle
13

Wenn Sie dies im Chrome / Chromium-Browser verwenden (z. B. in Ubuntu 14.04), 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

Auf diese Weise können Sie die Datei in Chrom oder Chrom laden. Wenn Sie denselben Vorgang für Windows ausführen müssen, können Sie diesen Schalter in den Eigenschaften der Chrome-Verknüpfung hinzufügen oder cmdmit dem Flag 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 hilft Ihnen die Verwendung dieses Befehls.

Alternativ können Sie es auch auf einem beliebigen Webserver (Beispiel: Tomcat-Java, NodeJS-JS, Tornado-Python usw.) hosten, je nachdem, mit welcher Sprache Sie vertraut sind. Dies funktioniert in jedem Browser.

Tejus Prasad
quelle
12

Wenn Sie aus irgendeinem Grund nicht können die Dateien von einem Webserver gehostet und müssen noch eine Art von Art der Beladung partials, können Sie greifen die zur Verwendung ngTemplateRichtlinie.

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

Fügen Sie dies 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 Anweisung:

app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          //template: 'tpl-productColour'
          templateUrl: 'tpl-productColour'
      };
   }
  );
link64
quelle
Da ich diesen Beitrag bereits bearbeitet habe, benutze templateUrl: 'tpl-productColor'
HANU
5

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: Richten Sie einen http-Server wie Apache oder nodejs + http-Server ein

Satz 2:

Fügen Sie nach dem Verknüpfungsziel von Chrome --allow-file-access-from-files hinzu, und öffnen Sie mit dieser Verknüpfung eine neue Suchinstanz

Geben Sie hier die Bildbeschreibung ein

Lösung 3:

Verwenden Sie stattdessen Firefox

Timothy.Li
quelle
Die Verwendung von Firefox hat mir geholfen
Vineeth Subbaraya
5
  1. Installieren Sie den Befehl http-server, running npm install http-server -g
  2. Öffnen Sie das Terminal in dem Pfad, in dem sich die index.html befindet
  3. Führen Sie den Befehl aus http-server . -o
  4. Geniesse es!
Michael Horta Fleitas
quelle
4

Ich würde hinzufügen, dass man auch xampp, mamp type of things verwenden und Ihr Projekt in den Ordner htdocs legen kann, damit es auf localhost zugänglich ist

Schnellzug
quelle
2

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

Edison D'souza
quelle
Danke Mann, zwei Stunden auf der Suche nach einer Lösung für das gleiche Problem und war dies ...
Santi Nunez
Willkommen Bruder. Happy Coding :)
Edison D'souza
1

Der Grund

Sie öffnen die Seite nicht über einen Server wie Apache. Wenn der Browser also versucht, die Ressource abzurufen, glaubt er, dass sie von einer separaten Domäne stammt, was nicht zulässig ist. Einige Browser erlauben dies jedoch.

Die Lösung

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

Alternativ einen anderen Browser verwenden Beim direkten Öffnen der Seite mit Firefox und Safari wurde kein Fehler angezeigt. 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.

Virendra Shenvi Velingkar
quelle
1

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

Shantha Moorthy K.
quelle
1

Es gibt eine Chrome-Erweiterung 200ok. Es ist ein Webserver für Chrome. Fügen Sie diese hinzu und wählen Sie Ihren Ordner aus

Gaurav Moolani
quelle
Ausgezeichnete Lösung
Mohamed Adel
0

Sie müssen Chrome mit dem folgenden Flag öffnen. Gehen Sie zum Ausführungsmenü und geben Sie "chrome --disable-web-security --user-data-dir" ein.

Stellen Sie sicher, dass alle Chrome-Instanzen geschlossen sind, bevor Sie das Flag zum Öffnen von Chrome verwenden. Sie erhalten eine Sicherheitswarnung, die angibt, dass CORS aktiviert ist.

Manas
quelle
0

Hinzufügen zu @Kirill Fuchs exzellenter Lösung und Beantwortung des Zweifels 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\appund Zugriff index.htmlunter appOrdner

Tejaswini
quelle
0

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.

etoricky
quelle
-1

Ich hatte das gleiche Problem. Nach dem Hinzufügen des folgenden Codes zu meiner app.js-Datei wurde dieser behoben.

var cors = require('cors')
app.use(cors());
Surendra Parchuru
quelle