XMLHttpRequest não pode carregar o arquivo. Solicitações de origem cruzada são compatíveis apenas com HTTP

Eu estou recebendo o seguinte erro:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

Sei que essa pergunta já foi respondida antes, mas ainda não encontrei uma solução para o meu problema. Tentei executar a chrome.exe --allow-file-access-from-filespartir do prompt de comando e movi o arquivo para o sistema de arquivos local, mas continuo recebendo o mesmo erro.

Agradeço todas as sugestões!

Se você estiver fazendo algo como escrever HTML e Javascript em um editor de código em seu computador pessoal e testar a saída em seu navegador, provavelmente receberá mensagens de erro sobre Cross Origin Requests. Seu navegador irá renderizar HTML e executar Javascript, jQuery, angularJs em seu navegador sem precisar de um servidor configurado. Mas muitos navegadores da web são programados para monitorar ataques entre sites e bloquearão solicitações. Você não quer que qualquer pessoa possa ler seu disco rígido no navegador da web. Você pode criar uma página da web totalmente funcional usando o Notepad ++ que executará Javascript e estruturas como jQuery e angularJs; e testar tudo apenas usando o item de menu Notepad ++,RUN, LAUNCH IN FIREFOX. Essa é uma maneira fácil e agradável de começar a criar uma página da web, mas quando você começa a criar qualquer coisa mais do que layout, CSS e navegação de página simples, você precisa de um servidor local configurado em sua máquina.

Aqui estão algumas opções que eu uso.

1. Teste sua página da web localmente no Firefox e implante em seu host.
2. ou: Execute um servidor local

Teste no Firefox, implante no host

1. O Firefox atualmente permite solicitações de origem cruzada de arquivos servidos a partir do seu disco rígido
2. Seu site de hospedagem na web permitirá solicitações de arquivos em pastas conforme configurado pelo arquivo de manifesto

Execute um servidor local

• Execute um servidor em seu computador, como Apache ou Python
• Python não é um servidor, mas executará um servidor simples

Execute um servidor local com Python

Obtenha seu endereço IP:

• No Windows: Abra o 'Prompt de Comando'. Todos os programas, acessórios, prompt de comando
• Eu sempre corro o Command PromptAS Administrator. Clique com o botão direito no Command Promptitem de menu e procureRun As Administrator
• Digite o comando: ipconfige pressione Enter.
• Procure por: Endereço IPv4. . . . . . . . 12.123.123,00
• Existem sites que também exibem seu endereço IP

Se você não tiver o Python, baixe e instale-o.

Usando o 'Prompt de Comando' você deve ir até a pasta onde estão os arquivos que você deseja que sirvam de página da web.

• Se você precisar voltar ao diretório C: \ Root - digite cd /
• digite cd Drive: \ Folder \ Folder \ etc para chegar à pasta onde está seu arquivo .Html (ou php, etc)
• Verifique o caminho. tipo: caminho no prompt de comando. Você deve ver o caminho para a pasta onde o python está localizado. Por exemplo, se python estiver em C: \ Python27, você deve ver esse endereço nos caminhos listados.
• Se o caminho para o diretório Python não estiver no caminho, você deve definir o caminho. digite: caminho de ajuda e pressione Enter. Você verá ajuda para o caminho.
• Digite algo como: path c: \ python27% path%
• % path% mantém todos os seus caminhos atuais. Você não quer apagar todos os seus caminhos atuais, apenas adicione um novo caminho.
• Crie o novo caminho DA pasta onde você deseja servir os arquivos.
• Inicie o servidor Python: Digite: python -m SimpleHTTPServer portOnde 'porta' é o número da porta que você deseja, por exemplopython -m SimpleHTTPServer 1337
• Se você deixar a porta vazia, o padrão é a porta 8000
• Se o servidor Python for iniciado com sucesso, você verá uma mensagem.

Execute seu aplicativo da Web localmente

• Abra um navegador
• No tipo de linha de endereço: http://your IP address:port
• http://xxx.xxx.x.x:1337 ou http://xx.xxx.xxx.xx:8000para o padrão
• Se o servidor estiver funcionando, você verá uma lista de seus arquivos no navegador
• Clique no arquivo que deseja veicular e ele deve ser exibido.

Soluções mais avançadas

• Instale um editor de código, servidor da web e outros serviços integrados.

Você pode instalar Apache, PHP, Python, SQL, Debuggers etc., todos separadamente em sua máquina, e então passar muito tempo tentando descobrir como fazer todos eles funcionarem juntos, ou procurar uma solução que combine todas essas coisas.

Gosto de usar o XAMPP com o NetBeans IDE. Você também pode instalar o WAMP, que fornece um recurso User Interfacepara gerenciar e integrar o Apache e outros serviços.

Solução Simples

Se você estiver trabalhando com arquivos html / js / css puros.

Instale este pequeno aplicativo de servidor ( link ) no Chrome. Abra o aplicativo e aponte o local do arquivo para o diretório do projeto.

Vá para o url mostrado no aplicativo.

Editar: solução mais inteligente usando Gulp

Passo 1: Para instalar o Gulp. Execute o seguinte comando em seu terminal.

npm install gulp-cli -g
npm install gulp -D

Etapa 2: dentro do diretório do projeto, crie um arquivo chamado gulpfile.js. Copie o seguinte conteúdo dentro dele.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

Etapa 3: Instale o plug-in gulp de sincronização do navegador. Dentro do mesmo diretório onde gulpfile.js está presente, execute o seguinte comando

npm install browser-sync gulp --save-dev

Etapa 4: inicie o servidor. Dentro do mesmo diretório onde gulpfile.js está presente, execute o seguinte comando

gulp serve

Este erro está acontecendo porque você está apenas abrindo documentos html diretamente do navegador. Para corrigir isso, você precisará servir seu código de um servidor da web e acessá-lo no localhost. Se você tiver o Apache configurado, use-o para servir seus arquivos. Alguns IDE têm servidores web integrados, como JetBrains IDE, Eclipse ...

Se você tiver o Node.Js configurado, poderá usar o servidor http . Basta executar npm install http-server -ge você poderá usá-lo em um terminal como http-server C:\location\to\app. Kirill Fuchs

Para adicionar à resposta elaborada de Alan Wells , aqui está uma solução rápida

Execute um servidor local

você pode servir qualquer pasta em seu computador com o Serve

Primeiro, navegue usando a linha de comando até a pasta que deseja servir.

Então

npx i -g serve
serve

ou se você gostaria de testar o Serve baixando-o

npx serve

e é isso! Você pode visualizar seus arquivos em http: // localhost: 5000

Eu estava enfrentando esse erro ao implantar meu projeto de API da Web localmente e estava chamando o projeto de API apenas com este URL fornecido abaixo:

localhost // myAPIProject

Como a mensagem de erro diz que não é http: //, mudei a URL e coloquei um prefixo http conforme fornecido abaixo e o erro desapareceu.

http: // localhost // myAPIProject

Se você usa o WebStorm Javascript IDE , pode simplesmente abrir seu projeto do WebStorm em seu navegador. O WebStorm iniciará automaticamente um servidor e você não receberá mais nenhum desses erros, porque agora está acessando os arquivos com os protocolos permitidos / suportados (HTTP).

Depende de suas necessidades, mas também há uma maneira rápida de verificar temporariamente seu JSON (fictício) salvando seu JSON em http://myjson.com . Copie o link da API e cole-o em seu código javascript. Viola! Quando você quiser implantar os códigos, não se esqueça de alterar essa url nos seus códigos!

Coloque a pasta do seu projeto nos htdocs do diretório Xampp Inicie o seu servidor Apache usando o painel de controle do xampp e abra um navegador goto localhost / projectfolder e comece a trabalhar