Erro “Solicitações de origem cruzada são suportadas apenas por HTTP”. Ao carregar um arquivo local

Eu estou tentando carregar um modelo 3D em Three.js com JSONLoader , e esse modelo 3D está no mesmo diretório que o site inteiro.

Estou recebendo o "Cross origin requests are only supported for HTTP." erro, mas eu não sei o que está causando isso nem como consertá-lo.

Minha bola de cristal diz que você está carregando o modelo usando file:// ou C:/ , que permanece fiel à mensagem de erro, pois não são http://

Então você pode instalar um servidor web no seu PC local ou fazer o upload do modelo em outro lugar e usar jsonp e mudar o URL para http://example.com/path/to/model

Apenas para ser explícito – Sim, o erro está dizendo que você não pode apontar seu navegador diretamente para file://some/path/some.html

Aqui estão algumas opções para acelerar rapidamente um servidor web local para permitir que seu navegador renderize arquivos locais

Python 2

Se você tem o Python instalado …

  1. Mude o diretório para a pasta onde seu arquivo some.html ou arquivo (s) existe usando o comando cd /path/to/your/folder

  2. Inicie um servidor da web Python usando o comando python -m SimpleHTTPServer

Isso iniciará um servidor da Web para hospedar toda a lista de diretórios em http://localhost:8000

  1. Você pode usar uma porta customizada python -m SimpleHTTPServer 9000 fornecendo o link: http://localhost:9000

Essa abordagem é incorporada em qualquer instalação do Python.

Python 3

Execute as mesmas etapas, mas use o seguinte comando em vez de python3 -m http.server

Node.js

Como alternativa, se você exigir uma configuração mais responsiva e já usar o nodejs …

  1. Instale o http-server digitando npm install -g http-server

  2. Mude para o seu diretório de trabalho, onde seu some.html vive

  3. Inicie seu servidor http emitindo http-server -c-1

Isso gera um httpd Node.js que serve os arquivos em seu diretório como arquivos estáticos acessíveis a partir de http://localhost:8080

Rubi

Se o seu idioma preferido é Ruby … os deuses Ruby dizem que isso também funciona:

 ruby -run -e httpd . -p 8080 

PHP

Claro que o PHP também tem sua solução.

 php -S localhost:8000 

No Chrome, você pode usar este sinalizador:

 --allow-file-access-from-files 

Leia mais aqui.

Corri para isso hoje.

Eu escrevi um código parecido com este:

 app.controller('ctrlr', function($scope, $http){ $http.get('localhost:3000').success(function(data) { $scope.stuff = data; }); }); 

… mas deveria ter sido assim:

 app.controller('ctrlr', function($scope, $http){ $http.get('http://localhost:3000').success(function(data) { $scope.stuff = data; }); }); 

A única diferença foi a falta de http:// no segundo trecho de código.

Só queria colocar isso lá fora, caso haja outros com um problema semelhante.

Basta alterar o URL para http://localhost vez de localhost . Se você abrir o arquivo html do local, você deve criar um servidor local para servir esse arquivo html, a maneira mais simples é usar o Web Server for Chrome . Isso consertará o problema.

Em um aplicativo Android – por exemplo, para permitir que o JavaScript tenha access a ativos por meio do file:///android_asset/ – use setAllowFileAccessFromFileURLs(true) nos WebSettings da chamada getSettings() no WebView .

Para aqueles no Windows sem Python ou Node.js, ainda há uma solução leve: Mongoose .

Tudo o que você faz é arrastar o executável para onde a raiz do servidor deve estar e executá-lo. Um ícone aparecerá na barra de tarefas e navegará para o servidor no navegador padrão.

Além disso, o Z-WAMP é um WAMP 100% portátil que funciona em uma única pasta, é incrível. Essa é uma opção se você precisar de um servidor PHP e MySQL rápido.

Se você usar o Mozilla Firefox, ele funcionará como esperado sem problemas;

PS Mesmo IE_Edge funciona bem, surpreendentemente !!

Vou listar 3 abordagens diferentes para resolver esse problema:

  1. Usando um pacote npm muito leve : Instale o live-server usando o npm install -g live-server . Então, vá para esse diretório abra o terminal e digite live-server e aperte enter, a página será servida no localhost:8080 . Bônus: Ele também suporta recarga quente por padrão.
  2. Usando um aplicativo leve do Google Chrome desenvolvido pelo Google : instale o aplicativo, acesse a guia “Aplicativos” no Google Chrome e abra o aplicativo. No aplicativo, aponte para a pasta correta. Sua página será servida!
  3. Modificação do atalho do Chrome nas janelas : crie um atalho para o navegador Chrome. Clique com o botão direito do mouse no ícone e abra as propriedades. Nas propriedades, edite o target para "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" e salve. Em seguida, usando o Chrome, abra a página usando ctrl+o . NOTA: NÃO use este atalho para navegação regular.

Eu estava recebendo este erro exato ao carregar um arquivo HTML no navegador que estava usando um arquivo json do diretório local. No meu caso, consegui resolver isso criando um servidor de nós simples que permitia o conteúdo estático do servidor. Deixei o código para isso com essa outra resposta .

Eu sugiro que você use um mini-servidor para executar esses tipos de aplicativos no host local (se você não estiver usando algum servidor embutido).

Aqui está um que é muito simples de configurar e executar:

 https://www.npmjs.com/package/tiny-server 

Ele simplesmente diz que o aplicativo deve ser executado em um servidor da web. Eu tive o mesmo problema com o chrome, iniciei o tomcat e movi meu aplicativo para lá, e funcionou.

er. Acabei de encontrar algumas palavras oficiais “A tentativa de carregar módulos AMD remotos não compilados que usam o plug-in dojo / texto falhará devido a restrições de segurança de origem cruzada. (Versões incorporadas dos módulos AMD não são afetadas porque as chamadas para texto / dojo são eliminadas por o sistema de compilation.) ” https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Uma maneira de trabalhar com arquivos locais é usá-los na pasta do projeto, e não fora da pasta do projeto. Crie uma pasta em seus arquivos de exemplo de projeto de maneira semelhante à que criamos para imagens e substitua a seção que usa o caminho local completo diferente do caminho do projeto e use o URL relativo do arquivo na pasta do projeto. Funcionou para mim

Para todos vocês no MacOS … configure um simples LaunchAgent para habilitar esses resources glamorosos em sua própria cópia do Chrome

Salve um plist , chamado whatever ( launch.chrome.dev.mode.plist , por exemplo) em ~/Library/LaunchAgents com conteúdo semelhante a …

     Label launch.chrome.dev.mode ProgramArguments  /Applications/Google Chrome.app/Contents/MacOS/Google Chrome -allow-file-access-from-files  RunAtLoad    

Ele deve iniciar na boot .. mas você pode forçá-lo a fazê-lo a qualquer momento com o comando terminal

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

TADA! 😎 💁🏻 🙊 🙏🏾

  • Instale o servidor web local para java, por exemplo, Tomcat, para php você pode usar a lâmpada etc
  • Elimine o arquivo json no diretório do servidor de aplicativos acessível público
  • Item de lista

  • Inicie o servidor de aplicativos e você poderá acessar o arquivo a partir do host local

Também consegui recriar essa mensagem de erro ao usar uma tag de âncora com o seguinte href:

Não é possível carregar arquivos locais estáticos (por exemplo: svg) sem servidor. Se você tem NPM / YARN instalado em sua máquina, você pode configurar o servidor http simples usando ” http-server ”

 npm install http-server -g http-server [path] [options] 

Ou abra o terminal na pasta do projeto e digite “hs”. Ele automaticamente iniciará o servidor HTTP ao vivo.

Eu suspeito que já é mencionado em algumas das respostas, mas vou modificar um pouco isso para ter resposta de trabalho completa (mais fácil de encontrar e usar).

  1. Vá para: https://nodejs.org/en/download/ . Instale os nodejs.

  2. Instale o http-server executando o comando a partir do prompt de comando npm install -g http-server .

  3. Mude para o seu diretório de trabalho, onde index.html / yoursome.html reside.

  4. Inicie seu servidor http executando o comando http-server -c-1

Abra o navegador da web para http://localhost:8080 ou http://localhost:8080/yoursome.html – dependendo do seu nome de arquivo html.

Muitos problemas para isso, com o meu problema está faltando ‘/’ exemplo: jquery-1.10.2.js: 8720 XMLHttpRequest não pode carregar http: // localhost: xxxProduct / getList_tagLabels / Deve ser: http: // localhost: xxx / Product / getList_tagLabels /

Espero que isso ajude para quem atender esse problema.