Errore AngularJS: le richieste di origine incrociata sono supportate solo per gli schemi di protocollo: http, dati, chrome-extension, https


130

Ho tre file di un'applicazione js angolare molto semplice

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

})();

Ho iniziato a ricevere questo errore non appena ho inserito un'inclusione di product-color.html usando la direttiva personalizzata denominata 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'.

Cosa potrebbe andare storto? È un problema relativo al percorso di product-color.html?

Tutti e tre i miei file sono nella stessa cartella principale C:/user/project/


1
Solo un rapido suggerimento che se fai qualcosa di stupido, come nel mio caso, ho accidentalmente aggiunto il TLD alla porta: " localhost: 8070.com ", riceverai lo stesso errore. Controlla quale URL stai tentando di risolvere!
Wildhoney,


Risposte:


306

Questo errore si sta verificando perché stai semplicemente aprendo documenti HTML direttamente dal browser. Per risolvere questo problema dovrai servire il tuo codice da un server web e accedervi su localhost. Se hai installato Apache, usalo per servire i tuoi file. Alcuni IDE hanno server Web integrati, come IDE JetBrains, Eclipse ...

Se hai installato Node.Js, puoi usare http-server . Basta eseguire npm install http-server -ge sarai in grado di usarlo nel terminale come http-server C:\location\to\app.


6
Ottima soluzione!
Jorge,

3
Il server http è il modo più semplice che ho visto di hosting locale. Nota: se non hai npm su Windows, installa node.js e diventerà disponibile in cmd.
Ottano,

3
E se è successo in visualizzazione Web in Android, cosa dovrei fare !?
Dr.jacky,

2
Per curiosità, perché non è possibile aprire i file nel browser Web?
tobiak777,

3
@reddy Chiaro e semplice: è un problema di sicurezza per il browser accedere al filesystem direttamente sul tuo computer.
Alex J,

49

FISSO MOLTO SEMPLICE

  1. Vai alla directory dell'app
  2. Avviare SimpleHTTPServer


Nel terminale

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Ora vai su localhost: 8000 nel tuo browser e la pagina mostrerà


8
In Python 3, dovrebbe essere python -m http.server.
Luan Nico,

1
Questo ha aiutato molto! Ottima soluzione
mirta,

42

L'operazione non è consentita in Chrome. Puoi utilizzare un server HTTP (Tomcat) oppure utilizzare Firefox.


4
Ho usato Firefox invece nella mia situazione e funziona. Chrome ha più sicurezza di Firefox? Perché mi è permesso farlo ...
thatOneGuy

Questa è la risposta migliore per me.
Thomas,

1
Breve e semplice ... Ha funzionato!
viks

mi ha davvero aiutato.
Ram Dutt Shukla,

1
Ehi ... grazie mille ... la tua risposta è stata di grande aiuto ... mi ha risparmiato gran parte del mio tempo
Megha,

31

Il mio problema è stato risolto semplicemente aggiungendo http://al mio indirizzo URL. per esempio ho usato http://localhost:3000/moviesinvece di localhost:3000/movies.


13

Se lo stai usando nel browser chrome / chromium (es: in Ubuntu 14.04), puoi utilizzare uno dei comandi seguenti per affrontare questo problema.

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

Ciò ti consentirà di caricare il file in chrome o chromium. Se devi eseguire la stessa operazione per Windows, puoi aggiungere questa opzione nelle proprietà del collegamento di Chrome o eseguirla cmdcon il flag. Questa operazione non è consentita in Chrome, Opera, Internet Explorer per impostazione predefinita. Di default funziona solo su Firefox e Safari. Quindi l'utilizzo di questo comando ti aiuterà.

In alternativa puoi anche ospitarlo su qualsiasi server web (esempio: Tomcat-java, NodeJS-JS, Tornado-Python, ecc.) In base alla lingua con cui ti senti a tuo agio. Funzionerà da qualsiasi browser.


12

Se per qualsiasi motivo non puoi avere i file ospitati da un server web e hai ancora bisogno di un modo per caricare i parziali, puoi ricorrere all'uso della ngTemplatedirettiva.

In questo modo, è possibile includere il markup nei tag script nel file index.html e non includere il markup come parte della direttiva effettiva.

Aggiungi questo al tuo 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>

Quindi, nella tua direttiva:

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

Come ho già modificato questo post usa templateUrl: 'tpl-productColor'
HANU il

5

Causa ultima:

Il protocollo di file non supporta la richiesta di origine incrociata per Chrome

Soluzione 1:

usa il protocollo http invece del file, ovvero: imposta un server http, come apache, o nodejs + http-server

Sotution 2:

Aggiungi --allow-file-access-from-files dopo la destinazione del collegamento di Chrome e apri una nuova istanza di esplorazione usando questo collegamento

inserisci qui la descrizione dell'immagine

Soluzione 3:

usa invece Firefox


L'uso di Firefox mi ha aiutato
Vineeth Subbaraya il

5
  1. Installa il server http, eseguendo il comando npm install http-server -g
  2. Apri il terminale nel percorso in cui si trova index.html
  3. Esegui comando http-server . -o
  4. Divertirsi!

4

Vorrei aggiungere che si può anche usare xampp, mamp tipo di cose e mettere il progetto nella cartella htdocs in modo che sia accessibile su localhost


2

Se stai già eseguendo un server, non dimenticare di utilizzare http: // nella chiamata API. Ciò potrebbe causare seri problemi.


Grazie amico, due ore alla ricerca di una soluzione allo stesso problema ed è stato questo ...
Santi Nunez,

Benvenuto fratello. Happy Coding :)
Edison D'souza,

1

La ragione

Non stai aprendo la pagina attraverso un server, come Apache, quindi quando il browser tenta di ottenere la risorsa pensa che provenga da un dominio separato, il che non è consentito. Anche se alcuni browser lo consentono.

La soluzione

Esegui inetmgr e ospita la tua pagina localmente e naviga come http: // localhost: portnumber / PageName.html o attraverso un server web come Apache, nginx, nodo ecc.

In alternativa, utilizzare un browser diverso Nessun errore è stato mostrato all'apertura diretta della pagina utilizzando Firefox e Safari. Viene solo per Chrome e IE (xx).

Se stai utilizzando editor di codice come Brackets, Sublime o Notepad ++, queste app gestiscono automaticamente questo errore.


1

Questo problema non si verifica in Firefox e Safari. Assicurati di utilizzare l'ultima versione di xml2json.js. Perché ho riscontrato l'errore del parser XML in IE. Nel modo migliore di Chrome dovresti aprirlo in un server come Apache o XAMPP.



0

Devi aprire Chrome usando il seguente flag Vai al menu Esegui e digita "chrome --disable-web-security --user-data-dir"

Assicurati che tutte le istanze di Chrome siano chiuse prima di usare la bandiera per aprire Chrome. Riceverai un avviso di sicurezza che indica che CORS è abilitato.


0

Aggiungendo alla soluzione eccellente di @Kirill Fuchs e rispondendo ai dubbi di @ StackUser - all'avvio del server http, imposta il percorso solo fino alla cartella dell'app, NON alla pagina html! http-server C:\location\to\appe accedi index.htmlalla appcartella


0

Passare a C: /user/project/index.html, aprirlo con Visual Studio 2017, File> Visualizza nel browser o premere Ctrl + Maiusc + W


-1

Ho avuto lo stesso problema. dopo aver aggiunto il codice seguente al mio file app.js è stato corretto.

var cors = require('cors')
app.use(cors());
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.