"Solicitações de origem cruzada são suportadas apenas para HTTP". erro ao carregar um arquivo local

Estou tentando carregar um modelo 3D no Three.js JSONLoadere 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 não sei o que está causando nem como corrigi-lo.

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

Portanto, você pode instalar um servidor da Web no PC local ou fazer upload do modelo em outro lugar e usar jsonpe alterar o URL parahttp://example.com/path/to/model

A origem é definida no RFC-6454 como

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

Portanto, mesmo que seu arquivo seja originário do mesmo host ( localhost), mas contanto que o esquema seja diferente ( http/ file), eles serão tratados como origem diferente.

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 ativar rapidamente um servidor da Web local e permitir que o navegador renderize arquivos locais

Python 2

Se você tem o Python instalado ...

1. Mude o diretório para a pasta em que seu arquivo some.htmlou arquivos existe usando o comandocd /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 sua lista de diretórios em http://localhost:8000

3. Você pode usar uma porta personalizada, python -m SimpleHTTPServer 9000fornecendo o link:http://localhost:9000

Essa abordagem está embutida em qualquer instalação do Python.

Python 3

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

Node.js

Como alternativa, se você exige uma configuração mais responsiva e já usa o nodejs ...

1. Instalar http-serverdigitandonpm install -g http-server

2. Mude para o seu diretório de trabalho, onde suas some.htmlvidas

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

Isso gera um httpd do Node.js. que serve os arquivos em seu diretório como arquivos estáticos acessíveis em 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 que se parecia com isso:

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

... mas deveria ter ficado 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 http://no segundo trecho de código.

Só queria divulgar isso no caso de outras pessoas com problemas semelhantes.

Basta alterar o URL para em http://localhostvez de localhost. Se você abrir o arquivo html a partir de local, crie um servidor local para veicular esse arquivo html, a maneira mais simples é usá-lo Web Server for Chrome. Isso resolverá o problema.

Em um aplicativo Android - por exemplo, para permitir que o JavaScript tenha acesso a ativos via file:///android_asset/- use setAllowFileAccessFromFileURLs(true)o WebSettingsque você obtém ao acessar getSettings()o WebView.

Use http://ou https://para criar URL

erro :localhost:8080

solução :http://localhost:8080

A maneira mais rápida para mim foi: para usuários do Windows, executar o seu arquivo no Firefox resolvido o problema, ou se você quiser usar o chrome, a maneira mais fácil para mim era instalar o Python 3 e, a partir do prompt de comando run command python -m http.server , vá para http: // localhost: 8000 / depois navegue até seus arquivos

python -m http.server

Vou listar três abordagens diferentes para resolver esse problema:

1. Usando um npmpacote muito leve : Instale o servidor ao vivo usando npm install -g live-server. Em seguida, vá para esse diretório, abra o terminal e digite live-servere pressione Enter, a página será veiculada em localhost:8080. BÔNUS: Ele também suporta recarga a quente por padrão.
2. Usando um aplicativo leve do Google Chrome desenvolvido pelo Google : instale o aplicativo, vá para a guia Aplicativos no Chrome e abra o aplicativo. No aplicativo, aponte para a pasta correta. Sua página será exibida!
3. Modificando o atalho do Chrome no Windows : Crie um atalho do navegador Chrome. Clique com o botão direito do mouse no ícone e abra propriedades. Nas propriedades, editar targeta "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 navegar regularmente.

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

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

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

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

PS Surpreendentemente, o IntenetExplorer_Edge funciona absolutamente bem !!!

Solução fácil para quem usa o VS Code

Estou recebendo esse erro há algum tempo. A maioria das respostas funciona. Mas eu encontrei uma solução diferente. Se você não quiser lidar com node.jsou qualquer outra solução aqui e estiver trabalhando com um arquivo HTML (chamando funções de outro arquivo js ou buscar json api's), tente usar a extensão do Live Server .

Ele permite que você abra um servidor ativo facilmente. E por causa disso cria localhostservidor, o problema está resolvendo. Você pode simplesmente iniciar o localhostarquivo, abra um arquivo HTML, clique com o botão direito do mouse no editor e clique em Open with Live Server.

Basicamente, carrega os arquivos usando em http://localhost/index.htmlvez de usar file://....

EDITAR

Não é necessário ter um .htmlarquivo. Você pode iniciar o Live Server com atalhos.

Clique (alt+L, alt+O)para abrir o servidor e (alt+L, alt+C)parar o servidor. [No MAC cmd+L, cmd+Oe cmd+L, cmd+C]

Espero que ajude alguém :)

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

Eu sugiro que você use um mini-servidor para executar esse tipo de aplicativo 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

Suspeito que já tenha sido mencionado em algumas respostas, mas modificarei um pouco para ter uma resposta completa (mais fácil de encontrar e usar).

1. Acesse: https://nodejs.org/en/download/ . Instale o nodejs.

2. Instale o servidor http executando o comando no prompt de comando npm install -g http-server.

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

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.

Simplesmente diz que o aplicativo deve ser executado em um servidor 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 construídos que usam o plug-in dojo / text falhará devido a restrições de segurança de origem cruzada. (As versões construídas dos módulos AMD não são afetadas porque as chamadas ao dojo / text são eliminadas por o sistema de compilação.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

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

Para todos vocês MacOS... configure um LaunchAgent simples para ativar esses recursos fascinantes em sua própria cópia do Chrome ...

Salve a plist, nomeado o que for ( launch.chrome.dev.mode.plistpor exemplo), ~/Library/LaunchAgentscom conteúdo semelhante a ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

Ele deve ser iniciado na inicialização. 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.
• Solte o arquivo json no diretório público do servidor de aplicativos acessível

• 

• Inicie o servidor de aplicativos e você poderá acessar o arquivo no localhost

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

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

Ou abra o terminal nessa pasta do projeto e digite "hs". Ele iniciará automaticamente o servidor HTTP ativo.

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 ajude quem encontre esse problema.

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

<a href="javascript:">Example a tag</a>

No meu caso, uma tag estava sendo usada para obter o 'Cursor do Ponteiro' e o evento foi realmente controlado por algum evento jQuery on click. Eu removi o href e adicionei uma classe que se aplica:

cursor:pointer;

Para usuários do Linux Python:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

Se você insistir em executar o .htmlarquivo localmente e não servi-lo com um servidor da web, poderá impedir que essas solicitações entre origens ocorram em primeiro lugar, disponibilizando os recursos problemáticos em linha.

Eu tive esse problema ao tentar atender .jsarquivos file://. Minha solução foi atualizar meu script de construção para substituir as <script src="...">tags <script>...</script>. Aqui está uma gulpabordagem para fazer isso:

1. corra npm install --save-devpara pacotes gulp, gulp-inlinee del.

2. Depois de criar um gulpfile.jsno diretório raiz, adicione o seguinte código (basta alterar os caminhos do arquivo para o que mais lhe convier):

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

3. Execute gulp bundle-for-localou atualize seu script de construção para executá-lo automaticamente.

Você pode ver o problema e a solução detalhados do meu caso aqui .

Cordova conseguir isso. Ainda não consigo descobrir como foi a cordova. Ele nem passa pelo shouldInterceptRequest.

Mais tarde, descobri que a chave para carregar qualquer arquivo do local é: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

E quando você deseja acessar qualquer recurso http, a visualização na Web faz a verificação com o método OPTIONS, que você pode conceder através do WebViewClient.shouldInterceptRequest retornando uma resposta e, para o método GET / POST a seguir, basta retornar nulo.

primeiro feche todas as instâncias do chrome.

depois disso siga isto.

Eu usei este comando no mac.

"/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome" - Permitir acesso a arquivos a partir de arquivos

Para Windows:

Como iniciar o html usando o Chrome no modo "- Permitir acesso a arquivos a partir de arquivos"?

Experimentei isso quando baixei uma página para visualização offline.

Eu só tinha que remover o integrity="*****"e crossorigin="anonymous"atributos de todo <link>e <script>etiquetas