Erro AngularJS: solicitações de origem cruzada são suportadas apenas para esquemas de protocolo: http, dados, extensão de cromo, https

130

Eu tenho três arquivos de um aplicativo js angular muito simples

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

})();

Comecei a receber esse erro assim que inseri uma inclusão de product-color.html usando a diretiva personalizada denominada 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'.

O que pode estar errado? É um problema de caminho para product-color.html?

Todos os meus três arquivos estão na mesma pasta raiz C:/user/project/

javascript html angularjs xmlhttprequest user3422637
fonte
1
Apenas um apontador rápido de que se você fizer algo estúpido, como no meu caso, acidentalmente anexei o TLD à porta: " localhost: 8070.com ", você receberá o mesmo erro. Verifique qual URL você está tentando resolver!
Wildhoney
Talvez semelhante aqui: stackoverflow.com/questions/10752055/…
Ngôc Tuấn
Possível duplicata de "Solicitações de origem cruzada são suportadas apenas para HTTP". erro ao carregar um arquivo local

Respostas:

306

Este erro está ocorrendo porque você está apenas abrindo documentos html diretamente do navegador. Para corrigir isso, você precisará fornecer seu código em um servidor da web e acessá-lo no host local. Se você tiver a configuração do Apache, use-o para servir seus arquivos. Alguns IDE's construíram servidores Web, como o JetBrains IDE, o Eclipse ...

Se você tiver a configuração do Node.Js, poderá usar o servidor http . Basta executar npm install http-server -ge você será capaz de usá-lo no terminal como http-server C:\location\to\app.

Kirill Fuchs
fonte
6
Excelente solução!
1074 Jorge Jorge
3
O servidor http é a maneira mais simples de hospedagem local. Nota: Se você não possui o npm no Windows, basta instalar o node.js e ele ficará disponível no cmd.
Octane
3
E se isso aconteceu no webview no android, o que devo fazer !?
Dr.jacky
2
Por curiosidade, por que não é possível simplesmente abrir os arquivos no navegador da web?
precisa saber é o seguinte
3
Simplesmente simples: é uma questão de segurança para o navegador acessar o sistema de arquivos diretamente no seu computador.
Alex J
49

CORREÇÃO MUITO SIMPLES

  1. Vá para o diretório do seu aplicativo
  2. Iniciar o SimpleHTTPServer


No terminal

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Agora, vá para localhost: 8000 no seu navegador e a página será exibida

Chirag
fonte
8
No Python 3, deveria ser python -m http.server.
Luan Nico
1
Isso ajudou muito! Ótima solução.
Mirta
42

A operação não é permitida no chrome. Você pode usar um servidor HTTP (Tomcat) ou o Firefox.

daniel
fonte
4
Eu usei o Firefox na minha situação e funciona. O Chrome tem mais segurança que o Firefox? Por que estou autorizado a fazer isso ....
thatOneGuy
Essa é a melhor resposta para mim.
Thomas
1
Curto e Simples ... Trabalhou!
Viks
realmente me ajudou também.
Ram Dutt Shukla
1
Hey..thanks muito .. sua resposta foi uma grande ajuda ... salvou muito do meu tempo
Megha
31

Meu problema foi resolvido apenas adicionando http://ao meu endereço de URL. por exemplo, usei em http://localhost:3000/moviesvez de localhost:3000/movies.

Ali Sepehri.Kh
fonte
13

Se você estiver usando isso no navegador chrome / chromium (por exemplo, no Ubuntu 14.04), poderá usar um dos comandos abaixo para solucionar esse 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

Isso permitirá que você carregue o arquivo em chrome ou crómio. Se você precisar fazer a mesma operação no Windows, poderá adicionar essa opção nas propriedades do atalho do chrome ou executá-la cmdcom o sinalizador. Esta operação não é permitida no Chrome, Opera, Internet Explorer por padrão. Por padrão, ele funciona apenas no Firefox e Safari. Portanto, usar este comando irá ajudá-lo.

Como alternativa, você também pode hospedá-lo em qualquer servidor da web (exemplo: Tomcat-java, NodeJS-JS, Tornado-Python etc.) com base em qual idioma você se sente confortável. Isso funcionará em qualquer navegador.

Tejus Prasad
fonte
12

Se, por qualquer motivo, você não puder hospedar os arquivos em um servidor da web e ainda precisar de algum tipo de carregamento de parciais, use a ngTemplatediretiva.

Dessa forma, você pode incluir sua marcação nas tags de script no arquivo index.html e não precisar incluir a marcação como parte da diretiva real.

Adicione isso ao seu 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>

Então, na sua diretiva:

app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          //template: 'tpl-productColour'
          templateUrl: 'tpl-productColour'
      };
   }
  );
link64
fonte
Como já editei este post, use templateUrl: 'tpl-productColor'
HANU
5

Causa raiz:

O protocolo de arquivo não suporta solicitação de origem cruzada para o Chrome

Solução 1:

use o protocolo http em vez de arquivo, o que significa: configurar um servidor http, como apache ou nodejs + http-server

Procedimento 2:

Adicione - Permitir acesso a arquivos após o destino do atalho do Chrome e abra uma nova instância de navegação usando este atalho

insira a descrição da imagem aqui

Solução 3:

use o Firefox

Timothy.Li
fonte
Usando o Firefox me ajudou
Vineeth Subbaraya
5
  1. Instale o servidor http, executando o comando npm install http-server -g
  2. Abra o terminal no caminho onde está localizado o index.html
  3. Comando de execução http-server . -o
  4. Aproveite!
Michael Horta Fleitas
fonte
4

Eu acrescentaria que também é possível usar xampp, tipo mamp, e colocar seu projeto na pasta htdocs para que ele seja acessível no localhost

trem-bala
fonte
2

Se você já estiver executando o servidor, não se esqueça de usar http: // na chamada da API. Isso pode causar um problema sério.

Edison D'souza
fonte
Graças homem, duas horas à procura de solução para mesmo problema e foi isso ...
Santi Nunez
Bem-vindo mano. Feliz codificação :)
Edison D'souza
1

O motivo

Você não está abrindo a página através de um servidor, como o Apache, portanto, quando o navegador tenta obter o recurso, ele pensa que é de um domínio separado, o que não é permitido. Embora alguns navegadores permitam.

A solução

Execute o inetmgr e hospede sua página localmente e navegue como http: // localhost: portnumber / PageName.html ou através de um servidor Web como Apache, nginx, node etc.

Como alternativa, use um navegador diferente Nenhum erro foi mostrado ao abrir diretamente a página usando o Firefox e o Safari. Ele vem apenas para Chrome e IE (xx).

Se você estiver usando editores de código como Brackets, Sublime ou Notepad ++, esses aplicativos lidam com esse erro automaticamente.

Virendra Shenvi Velingkar
fonte
1

Esse problema não está acontecendo no Firefox e Safari. Verifique se você está usando a versão mais recente do xml2json.js. Porque eu enfrentei o erro do analisador XML no IE. Na melhor maneira do Chrome, você deve abri-lo no servidor como Apache ou XAMPP.

Shantha Moorthy K
fonte
1

existe uma extensão do chrome 200ok, é um servidor web para o chrome, basta adicionar e selecionar sua pasta

gaurav moolani
fonte
Solução excelente
Mohamed Adel /
0

Você deve abrir o chrome usando o seguinte sinalizador: Vá para o menu Executar e digite "chrome --disable-web-security --user-data-dir"

Verifique se todas as instâncias do chrome estão fechadas antes de usar o sinalizador para abrir o chrome. Você receberá um aviso de segurança que indica que o CORS está ativado.

Manas
fonte
0

Adicionando à excelente solução @Kirill Fuchs e respondendo à dúvida do @ StackUser - ao iniciar o servidor http, defina o caminho até a pasta do aplicativo, NÃO até a página html! http-server C:\location\to\appe acessar index.htmlna apppasta

Tejaswini
fonte
0

Navegue para C: /user/project/index.html, abra-o com o Visual Studio 2017, Arquivo> Visualizar no navegador ou pressione Ctrl + Shift + W

etoricky
fonte
-1

Eu tive o mesmo problema. depois de adicionar o código abaixo ao meu arquivo app.js, ele foi corrigido.

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