Błąd AngularJS: żądania między źródłami są obsługiwane tylko w przypadku schematów protokołów: http, dane, rozszerzenie chrome, https

Question 1

Mam trzy pliki bardzo prostej aplikacji kątowej js

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

})();

Zacząłem otrzymywać ten błąd, gdy tylko wprowadziłem dołączenie pliku product-color.html przy użyciu dyrektywy niestandardowej o nazwie 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'.

Co może się nie udać? Czy problem dotyczy ścieżki produktu product-color.html?

Wszystkie moje trzy pliki znajdują się w tym samym folderze głównym C:/user/project/

Question 2

Ten błąd występuje, ponieważ właśnie otwierasz dokumenty html bezpośrednio z przeglądarki. Aby to naprawić, musisz udostępnić swój kod z serwera WWW i uzyskać do niego dostęp na hoście lokalnym. Jeśli masz konfigurację Apache, użyj jej do obsługi plików. Niektóre IDE mają wbudowane serwery internetowe, takie jak IDE JetBrains, Eclipse ...

Jeśli masz konfigurację Node.Js, możesz użyć serwera http . Po prostu biegnij npm install http-server -gi będziesz mógł go używać w terminalu jak http-server C:\location\to\app.

Question 3

BARDZO PROSTA POPRAWKA

Przejdź do katalogu aplikacji
Uruchom SimpleHTTPServer

W terminalu

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Teraz przejdź do localhost: 8000 w przeglądarce, a strona się wyświetli

Question 4

Operacja nie jest dozwolona w Chrome. Możesz użyć serwera HTTP (Tomcat) lub zamiast tego użyć przeglądarki Firefox.

Question 5

Mój problem został rozwiązany po prostu przez dodanie http://do mojego adresu URL. na przykład użyłem http://localhost:3000/movieszamiast localhost:3000/movies.

Question 6

Jeśli używasz tego w przeglądarce chrome / chromium (np. W Ubuntu 14.04), możesz użyć jednego z poniższych poleceń, aby rozwiązać ten problem.

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

Umożliwi to załadowanie pliku w wersji chrome lub chromium. Jeśli musisz wykonać tę samą operację dla systemu Windows, możesz dodać ten przełącznik we właściwościach skrótu chrome lub uruchomić go cmdz flagą. Ta operacja nie jest domyślnie dozwolona w Chrome, Opera, Internet Explorer. Domyślnie działa tylko w przeglądarkach Firefox i Safari. Dlatego użycie tego polecenia pomoże ci.

Alternatywnie możesz również hostować go na dowolnym serwerze internetowym (przykład: Tomcat-java, NodeJS-JS, Tornado-Python itp.) W oparciu o język, z którym czujesz się komfortowo. To zadziała z dowolnej przeglądarki.

Question 7

Jeśli z jakiegoś powodu nie możesz mieć plików hostowanych z serwera internetowego i nadal potrzebujesz jakiegoś sposobu ładowania podrzędnych, możesz skorzystać zngTemplate dyrektywy.

W ten sposób możesz umieścić swoje znaczniki wewnątrz tagów skryptu w pliku index.html i nie musisz uwzględniać znaczników jako części samej dyrektywy.

Dodaj to do swojego 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>

Następnie w swojej dyrektywie:

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

Question 8

RootCause:

Protokół pliku nie obsługuje żądań między źródłami dla Chrome

Rozwiązanie 1:

użyj protokołu http zamiast pliku, co oznacza: skonfiguruj serwer http, taki jak apache lub nodejs + serwer http

Rozwiązanie 2:

Dodaj --allow-file-access-from-files po docelowym skrócie Chrome i otwórz nową instancję przeglądania za pomocą tego skrótu

Rozwiązanie 3:

zamiast tego użyj przeglądarki Firefox

Question 9

Zainstaluj serwer http, uruchamiając polecenie npm install http-server -g
Otwórz terminal w ścieżce, w której znajduje się plik index.html
Uruchom polecenie http-server . -o
Ciesz się tym!

Question 10

Dodam, że można również użyć xampp, typu mamp i umieścić swój projekt w folderze htdocs, aby był dostępny na localhost

Question 11

Jeśli masz już uruchomiony serwer, nie zapomnij użyć http: // w wywołaniu API. Może to spowodować poważne problemy.

Question 12

Powód

Nie otwierasz strony za pośrednictwem serwera, takiego jak Apache, więc gdy przeglądarka próbuje uzyskać zasób, który uważa, że pochodzi z oddzielnej domeny, co jest niedozwolone. Chociaż niektóre przeglądarki na to pozwalają.

Rozwiązanie

Uruchom inetmgr i hostuj swoją stronę lokalnie i przeglądaj jako http: // localhost: numer portu / PageName.html lub przez serwer internetowy, taki jak Apache, nginx, node itp.

Alternatywnie użyj innej przeglądarki. Podczas bezpośredniego otwierania strony za pomocą przeglądarki Firefox i Safari nie pojawił się błąd. Występuje tylko dla Chrome i IE (xx).

Jeśli używasz edytorów kodu, takich jak Brackets, Sublime lub Notepad ++, te aplikacje automatycznie obsługują ten błąd.

Question 13

Ten problem nie występuje w przeglądarkach Firefox i Safari. Upewnij się, że korzystasz z najnowszej wersji xml2json.js. Ponieważ napotkałem błąd parsera XML w IE. W Chrome najlepiej otworzyć go na serwerze takim jak Apache lub XAMPP.

Question 14

istnieje rozszerzenie Chrome 200ok, to serwer WWW dla Chrome, po prostu dodaj to i wybierz folder

Question 15

Musisz otworzyć chrome używając następującej flagi Idź do menu Uruchom i wpisz "chrome --disable-web-security --user-data-dir"

Upewnij się, że wszystkie wystąpienia chrome są zamknięte, zanim użyjesz flagi do otwarcia chrome. Zostanie wyświetlone ostrzeżenie dotyczące zabezpieczeń, które wskazuje, że mechanizm CORS jest włączony.

Question 16

Dodanie do @Kirill Fuchs doskonałego rozwiązania i odpowiedź na wątpliwości @ StackUsera - podczas uruchamiania serwera http ustaw ścieżkę tylko do folderu aplikacji, NIE do strony html! http-server C:\location\to\appi dostęp index.htmldo appfolderu

Question 17

Przejdź do C: /user/project/index.html, otwórz go w programie Visual Studio 2017, plik> Wyświetl w przeglądarce lub naciśnij Ctrl + Shift + W

Question 18

Miałem ten sam problem. po dodaniu poniższego kodu do mojego pliku app.js zostało to naprawione.

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

Answer 1

Mam trzy pliki bardzo prostej aplikacji kątowej js

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

})();

Zacząłem otrzymywać ten błąd, gdy tylko wprowadziłem dołączenie pliku product-color.html przy użyciu dyrektywy niestandardowej o nazwie 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'.

Co może się nie udać? Czy problem dotyczy ścieżki produktu product-color.html?

Wszystkie moje trzy pliki znajdują się w tym samym folderze głównym C:/user/project/

Answer 2

1

Tylko szybka wskazówka, że jeśli zrobisz coś głupiego, na przykład w moim przypadku przypadkowo dołączyłem TLD do portu: " localhost: 8070.com ", to otrzymasz ten sam błąd. Sprawdź, jaki adres URL próbujesz rozwiązać!

Wildhoney

Answer 3

Może podobnie tutaj: stackoverflow.com/questions/10752055/…

Ngô Đức Tuấn

Answer 4

Możliwy duplikat „Żądania z różnych źródeł są obsługiwane tylko w przypadku protokołu HTTP”. błąd podczas ładowania pliku lokalnego

Answer 5

306

Ten błąd występuje, ponieważ właśnie otwierasz dokumenty html bezpośrednio z przeglądarki. Aby to naprawić, musisz udostępnić swój kod z serwera WWW i uzyskać do niego dostęp na hoście lokalnym. Jeśli masz konfigurację Apache, użyj jej do obsługi plików. Niektóre IDE mają wbudowane serwery internetowe, takie jak IDE JetBrains, Eclipse ...

Jeśli masz konfigurację Node.Js, możesz użyć serwera http . Po prostu biegnij npm install http-server -gi będziesz mógł go używać w terminalu jak http-server C:\location\to\app.

Kirill Fuchs
źródło

6

Doskonałe rozwiązanie!

Jorge,

3

Serwer http to najprostszy sposób hostowania lokalnego, jaki widziałem. Uwaga: jeśli nie masz npm w systemie Windows, po prostu zainstaluj node.js, a stanie się on dostępny w cmd.

Octane

3

A jeśli zdarzyło się to w przeglądarce internetowej na Androidzie, co mam zrobić !?

Dr Jacky

2

Dlaczego z ciekawości nie można po prostu otworzyć plików w przeglądarce internetowej?

tobiak777

3

@reddy Prosty i prosty: dostęp przeglądarki do systemu plików bezpośrednio na twoim komputerze jest problemem bezpieczeństwa.

Alex J

Answer 6

6

Doskonałe rozwiązanie!

Jorge,

Answer 7

3

Serwer http to najprostszy sposób hostowania lokalnego, jaki widziałem. Uwaga: jeśli nie masz npm w systemie Windows, po prostu zainstaluj node.js, a stanie się on dostępny w cmd.

Octane

Answer 8

3

A jeśli zdarzyło się to w przeglądarce internetowej na Androidzie, co mam zrobić !?

Dr Jacky

Answer 9

2

Dlaczego z ciekawości nie można po prostu otworzyć plików w przeglądarce internetowej?

tobiak777

Answer 10

3

@reddy Prosty i prosty: dostęp przeglądarki do systemu plików bezpośrednio na twoim komputerze jest problemem bezpieczeństwa.

Alex J

Answer 11

49

BARDZO PROSTA POPRAWKA

Przejdź do katalogu aplikacji
Uruchom SimpleHTTPServer

W terminalu

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Teraz przejdź do localhost: 8000 w przeglądarce, a strona się wyświetli

Chirag
źródło

8

W Pythonie 3 powinno być python -m http.server.

Luan Nico

1

To bardzo pomogło! Świetne rozwiązanie.

mirta

Answer 12

8

W Pythonie 3 powinno być python -m http.server.

Luan Nico

Answer 13

1

To bardzo pomogło! Świetne rozwiązanie.

mirta

Answer 14

42

Operacja nie jest dozwolona w Chrome. Możesz użyć serwera HTTP (Tomcat) lub zamiast tego użyć przeglądarki Firefox.

daniel
źródło

4

Zamiast tego użyłem programu Firefox w mojej sytuacji i działa. Czy Chrome ma większe bezpieczeństwo niż Firefox? Dlaczego mogę to zrobić…

thatOneGuy

To dla mnie najlepsza odpowiedź.

Thomas

1

Krótko i prosto ... Udało się!

viks

naprawdę mi pomogło.

Ram Dutt Shukla

1

Hej ... wielkie dzięki ... Twoja odpowiedź była bardzo pomocna ... zaoszczędziła mi dużo czasu

Megha.

Answer 15

4