Error de AngularJS: las solicitudes de origen cruzado solo son compatibles con esquemas de protocolo: http, data, chrome-extension, https

130

Tengo tres archivos de una aplicación angular simple muy 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"
              }
  ];

})();

Comencé a recibir este error tan pronto como ingresé una inclusión de product-color.html usando una directiva personalizada llamada 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é puede estar yendo mal? ¿Es un problema de ruta para product-color.html?

Todos mis tres archivos están en la misma carpeta raíz C:/user/project/

javascript html angularjs xmlhttprequest usuario3422637
fuente
1
Solo un indicador rápido de que si haces algo estúpido, como en mi caso, agregué accidentalmente el TLD al puerto: " localhost: 8070.com ", recibirás el mismo error. ¡Comprueba qué URL estás intentando resolver!
Wildhoney
Tal vez similar aquí: stackoverflow.com/questions/10752055/…
Ngô Đức Tuấn
Posible duplicado de "Las solicitudes de origen cruzado solo son compatibles con HTTP". error al cargar un archivo local

Respuestas:

306

Este error ocurre porque solo está abriendo documentos html directamente desde el navegador. Para solucionar esto, deberá entregar su código desde un servidor web y acceder a él en localhost. Si tiene la configuración de Apache, úsela para servir sus archivos. Algunos IDE han incorporado servidores web, como los IDB de JetBrains, Eclipse ...

Si tiene la configuración de Node.Js, puede usar el servidor http . Simplemente ejecute npm install http-server -gy podrá usarlo en la terminal como http-server C:\location\to\app.

Kirill Fuchs
fuente
66
Excelente solucion!
Jorge
3
El servidor http es la forma más simple que he visto de alojamiento local. Nota: Si no tiene npm en Windows, simplemente instale node.js y estará disponible en cmd.
Octane
3
Y si sucedió en webview en Android, ¿qué debo hacer?
Dr.jacky
2
Por curiosidad, ¿por qué no es posible abrir los archivos en el navegador web?
tobiak777
3
@reddy Sencillo y simple: es un problema de seguridad para el navegador acceder al sistema de archivos directamente en su computadora.
Alex J
49

ARREGLO MUY SIMPLE

  1. Ve al directorio de tu aplicación
  2. Inicie SimpleHTTPServer


En la terminal

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Ahora, vaya a localhost: 8000 en su navegador y la página mostrará

Chirag
fuente
8
En Python 3, debería serlo python -m http.server.
Luan Nico
1
¡Esto ayudó mucho! Gran solución
mirta
42

La operación no está permitida en cromo. Puede usar un servidor HTTP (Tomcat) o usar Firefox en su lugar.

daniel
fuente
44
En cambio, usé firefox en mi situación y funciona. ¿Chrome tiene más seguridad que Firefox? ¿Por qué se me permite hacer esto ...
ThatOneGuy
Esa es la mejor respuesta para mí.
Thomas
1
Corto y simple ... ¡Funcionado!
viks
Realmente me ayudó también.
Ram Dutt Shukla
1
Hola ... muchas gracias ... tu respuesta fue de gran ayuda ... me ahorró mucho tiempo
Megha
31

Mi problema se resolvió simplemente agregando http://a mi dirección URL. por ejemplo, usé en http://localhost:3000/movieslugar de localhost:3000/movies.

Ali Sepehri.Kh
fuente
13

Si está usando esto en el navegador chrome / chromium (ej: en Ubuntu 14.04), puede usar uno de los siguientes comandos para resolver este 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

Esto le permitirá cargar el archivo en cromo o cromo. Si tiene que hacer la misma operación para Windows, puede agregar este modificador en las propiedades del acceso directo de Chrome o ejecutarlo desdecmd con la bandera. Esta operación no está permitida en Chrome, Opera, Internet Explorer por defecto. Por defecto solo funciona en Firefox y Safari. Por lo tanto, usar este comando te ayudará.

Alternativamente, también puede alojarlo en cualquier servidor web (Ejemplo: Tomcat-java, NodeJS-JS, Tornado-Python, etc.) según el idioma con el que se sienta cómodo. Esto funcionará desde cualquier navegador.

Tejus Prasad
fuente
12

Si por alguna razón no puede tener los archivos alojados en un servidor web y todavía necesita algún tipo de carga parcial, puede recurrir al uso de la ngTemplatedirectiva.

De esta manera, puede incluir su marcado dentro de las etiquetas de script en su archivo index.html y no tener que incluir el marcado como parte de la directiva real.

Agregue esto a su 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>

Entonces, en su directiva:

app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          //template: 'tpl-productColour'
          templateUrl: 'tpl-productColour'
      };
   }
  );
link64
fuente
Como ya he editado esta publicación, use templateUrl: 'tpl-productColor'
HANU
5

Causa principal:

El protocolo de archivo no admite solicitudes de origen cruzado para Chrome

Solución 1:

usar el protocolo http en lugar del archivo, lo que significa: configurar un servidor http, como apache, o nodejs + http-server

Sotution 2:

Agregue --allow-file-access-from-files después del objetivo de acceso directo de Chrome, y abra una nueva instancia de exploración usando este acceso directo

ingrese la descripción de la imagen aquí

Solución 3:

use Firefox en su lugar

Timothy.Li
fuente
Usar Firefox me ayudó
Vineeth Subbaraya
5
  1. Instale el servidor http, ejecutando el comando npm install http-server -g
  2. Abra el terminal en la ruta donde se encuentra el index.html
  3. Ejecutar comando http-server . -o
  4. ¡Disfrútala!
Michael Horta Fleitas
fuente
4

Agregaría que también se puede usar xampp, tipo de cosas mamp y poner su proyecto en la carpeta htdocs para que sea accesible en localhost

tren bala
fuente
2

Si ya está ejecutando el servidor, no olvide usar http: // en la llamada a la API. Esto puede causar un problema grave.

Edison D'souza
fuente
Gracias hombre, dos horas buscando solución al mismo problema y fue esto ...
Santi Nunez
Bienvenido Hermano. Happy Coding :)
Edison D'souza
1

La razón

No está abriendo la página a través de un servidor, como Apache, por lo que cuando el navegador intenta obtener el recurso, cree que proviene de un dominio separado, lo que no está permitido. Aunque algunos navegadores lo permiten.

La solución

Ejecute inetmgr y aloje su página localmente y navegue como http: // localhost: portnumber / PageName.html o mediante un servidor web como Apache, nginx, node, etc.

Alternativamente, use un navegador diferente No se mostró ningún error al abrir directamente la página usando Firefox y Safari. Viene solo para Chrome e IE (xx).

Si está utilizando editores de código como Brackets, Sublime o Notepad ++, esas aplicaciones manejan este error automáticamente.

Virendra Shenvi Velingkar
fuente
1

Este problema no ocurre en Firefox y Safari. Asegúrese de estar utilizando la última versión de xml2json.js. Porque me enfrenté al error del analizador XML en IE. En Chrome, debes abrirlo en un servidor como Apache o XAMPP.

Shantha Moorthy K
fuente
1

hay una extensión de Chrome 200ok, es un servidor web para Chrome solo agregue eso y seleccione su carpeta

gaurav moolani
fuente
Excelente solución
Mohamed Adel
0

Debe abrir Chrome con el siguiente indicador Ir al menú Ejecutar y escribir "Chrome --disable-web-security --user-data-dir"

Asegúrese de que todas las instancias de Chrome estén cerradas antes de usar la bandera para abrir Chrome. Recibirá una advertencia de seguridad que indica que CORS está habilitado.

Manas
fuente
0

Agregando a @Kirill Fuchs una excelente solución y respondiendo a la duda de @ StackUser, al iniciar el servidor http, configure la ruta solo hasta la carpeta de la aplicación, ¡NO hasta la página html! http-server C:\location\to\appy acceder index.htmlbajo appcarpeta

Tejaswini
fuente
0

Navegue a C: /user/project/index.html, ábralo con Visual Studio 2017, Archivo> Ver en el navegador o presione Ctrl + Shift + W

etoricky
fuente
-1

Tuve el mismo problema. después de agregar el siguiente código a mi archivo app.js, se solucionó.

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