"Le richieste di origine incrociata sono supportate solo per HTTP." errore durante il caricamento di un file locale

Sto cercando di caricare un modello 3D in Three.js con JSONLoadere quel modello 3D si trova nella stessa directory dell'intero sito Web.

Ricevo l' "Cross origin requests are only supported for HTTP."errore, ma non so cosa lo stia causando né come risolverlo.

La mia sfera di cristallo dice che stai caricando il modello usando uno dei due file://o C:/, che rimane fedele al messaggio di errore in quanto non lo sonohttp://

Quindi puoi installare un server web sul tuo PC locale o caricare il modello da qualche altra parte e utilizzare jsonpe modificare l'URL inhttp://example.com/path/to/model

L'origine è definita in RFC-6454 come

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

Quindi, anche se il tuo file proviene dallo stesso host ( localhost), ma fintanto che lo schema è diverso ( http/ file), vengono trattati come origine diversa.

Giusto per essere espliciti - Sì, l'errore sta dicendo che non puoi puntare direttamente il tuo browser file://some/path/some.html

Ecco alcune opzioni per far girare rapidamente un server Web locale per consentire al browser di eseguire il rendering dei file locali

Python 2

Se hai installato Python ...

1. Cambia la directory nella cartella in cui some.htmlesistono i tuoi file usando il comandocd /path/to/your/folder

2. Avviare un server Web Python usando il comando python -m SimpleHTTPServer

Questo avvierà un server web per ospitare l'intero elenco di directory su http://localhost:8000

3. È possibile utilizzare una porta personalizzata che python -m SimpleHTTPServer 9000fornisce un collegamento:http://localhost:9000

Questo approccio è integrato in qualsiasi installazione di Python.

Python 3

Fai gli stessi passi, ma usa invece il seguente comando python3 -m http.server

Node.js

In alternativa, se richiedi una configurazione più reattiva e usi già nodejs ...

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

2. Cambia nella tua directory di lavoro, dove some.htmlvive

3. Avvia il tuo server http emettendo http-server -c-1

Questo fa girare un httpd Node.js che serve i file nella tua directory come file statici accessibili da http://localhost:8080

Rubino

Se la tua lingua preferita è Ruby ... gli dei Ruby dicono che funziona anche questo:

ruby -run -e httpd . -p 8080

PHP

Naturalmente PHP ha anche la sua soluzione.

php -S localhost:8000

In Chrome puoi usare questo flag:

--allow-file-access-from-files

Leggi di più qui.

Ho partecipato a questo oggi.

Ho scritto un codice simile a questo:

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

... ma avrebbe dovuto apparire così:

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

L'unica differenza era la mancanza di http://nel secondo frammento di codice.

Volevo solo dirlo nel caso ce ne fossero altri con un problema simile.

Basta cambiare l'URL in http://localhostinvece di localhost. Se apri il file html da local, dovresti creare un server locale per servire quel file html, usando il modo più semplice Web Server for Chrome. Ciò risolverà il problema.

In un'app per Android, ad esempio per consentire a JavaScript di accedere alle risorse tramite file:///android_asset/, utilizzare setAllowFileAccessFromFileURLs(true)quello WebSettingsche si ottiene chiamando getSettings()il WebView.

Utilizzare http://o https://per creare l'URL

errore :localhost:8080

soluzione :http://localhost:8080

il modo più veloce per me è stato: per gli utenti di Windows eseguire il file su Firefox problema risolto, o se si desidera utilizzare Chrome il modo più semplice per me era installare Python 3 quindi dal prompt dei comandi eseguire il comando python -m http.server quindi andare su http: // localhost: 8000 / quindi vai ai tuoi file

python -m http.server

Elencherò 3 diversi approcci per risolvere questo problema:

1. Utilizzando un npmpacchetto molto leggero : installare live-server utilizzando npm install -g live-server. Quindi, vai in quella directory, apri il terminale e digita live-servere premi invio, la pagina verrà servita su localhost:8080. BONUS: supporta anche la ricarica a caldo per impostazione predefinita.
2. Utilizzando un'app di Google Chrome leggera sviluppata da Google : installa quindi l'app, vai alla scheda app in Chrome e apri l'app. Nell'app puntalo nella cartella giusta. La tua pagina sarà servita!
3. Modifica del collegamento di Chrome in Windows : crea il collegamento di un browser Chrome. Fare clic con il tasto destro sull'icona e aprire le proprietà. In Proprietà, modificare targetper "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"e risparmiare. Quindi usando Chrome apri la pagina usando ctrl+o. NOTA: NON utilizzare questo collegamento per la navigazione regolare.

Per quelli su Windows senza Python o Node.js, esiste ancora una soluzione leggera: Mongoose .

Tutto ciò che devi fare è trascinare l'eseguibile in qualsiasi posizione dovrebbe trovarsi la radice del server ed eseguirlo. Apparirà un'icona nella barra delle applicazioni e passerà al server nel browser predefinito.

Inoltre, Z-WAMP è un WAMP portatile al 100% che funziona in una singola cartella, è fantastico. Questa è un'opzione se hai bisogno di un veloce server PHP e MySQL.

Se usi Mozilla Firefox, funzionerà come previsto senza problemi;

PS Sorprendentemente, IntenetExplorer_Edge funziona perfettamente !!!

Soluzione semplice per chi utilizza VS Code

Ricevo questo errore da un po '. La maggior parte delle risposte funziona. Ma ho trovato una soluzione diversa. Se non vuoi occuparti di questa node.jssoluzione o di qualsiasi altra soluzione e stai lavorando con un file HTML (chiamata di funzioni da un altro file js o recupero di json api), prova a utilizzare l' estensione di Live Server .

Ti consente di aprire facilmente un server live. E a causa di ciò crea localhostserver, il problema si sta risolvendo. Puoi semplicemente avviare localhostaprendo un file HTML e fare clic con il tasto destro sull'editor e fare clic su Open with Live Server.

In pratica carica i file usando http://localhost/index.htmlinvece di usare file://....

MODIFICARE

Non è necessario disporre di un .htmlfile. È possibile avviare il Live Server con collegamenti.

Premi (alt+L, alt+O)per aprire il server e (alt+L, alt+C)per arrestare il server. [Su MAC cmd+L, cmd+Oe cmd+L, cmd+C]

Spero che possa aiutare qualcuno :)

Stavo ottenendo questo errore esatto durante il caricamento di un file HTML sul browser che utilizzava un file json dalla directory locale. Nel mio caso, sono stato in grado di risolverlo creando un semplice nodo server che consentiva di serverare contenuto statico. Ho lasciato il codice per questo a questa altra risposta .

Ti suggerisco di usare un mini-server per eseguire questo tipo di applicazioni su localhost (se non stai usando un server integrato).

Eccone uno molto semplice da configurare ed eseguire:

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

Ho il sospetto che sia già menzionato in alcune delle risposte, ma lo modificherò leggermente per avere una risposta di lavoro completa (più facile da trovare e utilizzare).

1. Vai a: https://nodejs.org/en/download/ . Installa nodejs.

2. Installa http-server eseguendo il comando dal prompt dei comandi npm install -g http-server.

3. Passa alla tua directory di lavoro, dove index.html/ yoursome.htmlrisiede.

4. Avviare il server http eseguendo il comando http-server -c-1

Apri il browser web su http://localhost:8080 o http://localhost:8080/yoursome.html - a seconda del tuo nome file html.

Dice semplicemente che l'applicazione dovrebbe essere eseguita su un server web. Ho avuto lo stesso problema con Chrome, ho avviato Tomcat e trasferito l'applicazione lì, e ha funzionato.

ER. Ho appena trovato alcune parole ufficiali "Il tentativo di caricare moduli AMD remoti non compilati che utilizzano il plug-in dojo / testo fallirà a causa delle restrizioni di sicurezza tra le origini. (Le versioni integrate dei moduli AMD non sono interessate perché le chiamate a dojo / testo sono eliminate da il sistema di compilazione.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Un modo in cui ha funzionato caricando i file locali è usarli con nella cartella del progetto anziché all'esterno della cartella del progetto. Crea una cartella sotto i file di esempio del tuo progetto simile al modo in cui creiamo per le immagini e sostituisci la sezione in cui usi il percorso locale completo diverso dal percorso del progetto e usa l'URL relativo del file nella cartella del progetto. Ha funzionato per me

Per tutti voi MacOS... installate un semplice LaunchAgent per abilitare queste capacità glamour nella vostra copia di Chrome ...

Salvare un plist, chiamato qualunque ( launch.chrome.dev.mode.plistad esempio) ~/Library/LaunchAgentscon contenuto simile 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>

Si dovrebbe lanciare all'avvio .. ma si può costringerlo a farlo in qualsiasi momento con il comando da terminale

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

TADA! 😎 💁🏻 🙊 🙏🏾

• Installa webserver locale per java, ad esempio Tomcat, per php puoi usare lamp etc
• Rilascia il file json nella directory del server app accessibile al pubblico

• 

• Avviare il server delle app e si dovrebbe essere in grado di accedere al file da localhost

Non è possibile caricare file locali statici (ad es. Svg) senza server. Se hai installato NPM / YARN sul tuo computer, puoi configurare un semplice server http usando " http-server "

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

Oppure apri il terminale nella cartella del progetto e digita "hs". Avvierà automaticamente il server live HTTP.

Molti problemi per questo, con il mio problema mancano '/' esempio: jquery-1.10.2.js: 8720 XMLHttpRequest non può caricare http: // localhost: xxxProduct / getList_tagLabels / Deve essere: http: // localhost: xxx / Product / getList_tagLabels /

Spero che questo aiuto per chi incontra questo problema.

Sono stato anche in grado di ricreare questo messaggio di errore quando si utilizza un tag anchor con il seguente href:

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

Nel mio caso è stato utilizzato un tag per ottenere il "cursore puntatore" e l'evento è stato effettivamente controllato da alcuni eventi jQuery al clic. Ho rimosso l'href e aggiunto una classe che si applica:

cursor:pointer;

Per gli utenti di Linux Python:

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

Se insisti nell'eseguire .htmllocalmente il file e non servirlo con un server web, puoi impedire che quelle richieste di origine incrociata si verifichino in primo luogo rendendo le risorse problematiche disponibili in linea.

Ho avuto questo problema quando ho provato a servire i .jsfile file://. La mia soluzione era aggiornare il mio script di build con il quale sostituire i <script src="...">tag <script>...</script>. Ecco un gulpapproccio per farlo:

1. Eseguire npm install --save-devai pacchetti gulp, gulp-inlineed del.

2. Dopo aver creato un gulpfile.jsnella directory principale, aggiungi il seguente codice (modifica i percorsi dei file per quello che preferisci):

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. Esegui gulp bundle-for-localo aggiorna il tuo script di build per eseguirlo automaticamente.

Puoi vedere il problema dettagliato e la soluzione per il mio caso qui .

Cordova ci riesce. Non riesco ancora a capire come ha fatto Cordova. Non passa nemmeno attraverso shouldInterceptRequest.

Successivamente ho scoperto che la chiave per caricare qualsiasi file da local è: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

E quando si desidera accedere a qualsiasi risorsa http, la visualizzazione Web eseguirà il controllo con il metodo OPTIONS, che è possibile concedere l'accesso tramite WebViewClient.shouldInterceptRequest restituendo una risposta e per il seguente metodo GET / POST, è possibile restituire null.

prima chiudi tutta l'istanza di chrome.

dopo questo segui questo.

Ho usato questo comando su mac.

"/ Applicazioni / Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-files

Per windows:

Come avviare HTML tramite Chrome in modalità "--allow-file-access-from-files"?

L'ho sperimentato quando ho scaricato una pagina per la visualizzazione offline.

Ho dovuto solo rimuovere gli attributi integrity="*****"e crossorigin="anonymous"da tutto <link>e <script>tag