“Richieste di origine incrociata sono supportate solo per HTTP”. Errore durante il caricamento di un file locale

Sto provando a caricare un modello 3D in Three.js con JSONLoader e quel modello 3D si trova nella stessa directory dell’intero sito Web.

Le "Cross origin requests are only supported for HTTP." errore, ma non so cosa lo sta causando, né come risolverlo.

La mia sfera di cristallo dice che stai caricando il modello usando il file:// o C:/ , che rimane fedele al messaggio di errore in quanto non sono http://

Quindi puoi installare un web server nel tuo PC locale o caricare il modello da qualche altra parte e usare jsonp e cambiare l’URL in http://example.com/path/to/model

Giusto per essere esplicito – Sì, l’errore sta dicendo che non puoi puntare il browser direttamente sul file://some/path/some.html

Ecco alcune opzioni per avviare rapidamente un server Web locale per consentire al browser di visualizzare i file locali

Python 2

Se hai installato Python …

  1. Cambia directory nella cartella in cui some.html il file some.html o file (s) usando il comando cd /path/to/your/folder

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

Verrà avviato un server Web per ospitare l’intero elenco di directory su http://localhost:8000

  1. È ansible utilizzare una porta personalizzata python -m SimpleHTTPServer 9000 fornisce il collegamento: http://localhost:9000

Questo approccio è integrato in qualsiasi installazione Python.

Python 3

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

Node.js

In alternativa, se richiedi una configurazione più retriggers e già usi nodejs …

  1. Installa http-server digitando npm install -g http-server

  2. some.html nella tua directory di lavoro, dove vive il tuo some.html

  3. Avvia il tuo server http pubblicando 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 … i Ruby Gods dicono che funziona anche così:

 ruby -run -e httpd . -p 8080 

PHP

Ovviamente PHP ha anche la sua soluzione.

 php -S localhost:8000 

In Chrome puoi utilizzare questo flag:

 --allow-file-access-from-files 

Leggi di più qui.

Sono arrivato 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 assomigliare a questo:

 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 snippet di codice.

Volevo solo metterlo in evidenza nel caso ci fossero altri con un problema simile.

Basta cambiare l’URL in http://localhost anziché localhost . Se apri il file html da locale, dovresti creare un server locale per servire quel file html, il modo più semplice è usare Web Server for Chrome . Questo risolverà il problema.

In un’app Android, ad esempio, per consentire a JavaScript di accedere alle risorse tramite file:///android_asset/ – usa setAllowFileAccessFromFileURLs(true) sui WebSettings che ottieni chiamando getSettings() sul WebView .

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

Tutto ciò che fai è trascinare l’eseguibile ovunque sia la radice del server, ed eseguirlo. Apparirà un’icona nella barra delle applicazioni e verrà indirizzata al server nel browser predefinito.

Inoltre, Z-WAMP è un WAMP portatile al 100% che gira 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 Even IE_Edge funziona bene, sorprendentemente !!

Ho intenzione di elencare 3 diversi approcci per risolvere questo problema:

  1. Utilizzo di un pacchetto npm molto leggero : installare live-server utilizzando npm install -g live-server . Quindi, vai in quella directory, apri il terminale e digita live-server e premi invio, la pagina verrà pubblicata su localhost:8080 . BONUS: supporta anche il ricaricamento a caldo di default.
  2. Utilizzando un’app di Google Chrome leggera sviluppata da Google : installa l’app, vai alla scheda App in Chrome e apri l’app. Nell’app, posizionalo nella cartella corretta. La tua pagina sarà servita!
  3. Modifica del collegamento di Chrome in Windows : crea un collegamento del browser Chrome. Fare clic con il tasto destro sull’icona e aprire le proprietà. Nelle proprietà, modifica la target in "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" e salva. Quindi usando Chrome apri la pagina usando ctrl+o . NOTA: NON utilizzare questo collegamento per la normale navigazione.

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 risolvere questo problema creando un semplice server nodo che consentiva il contenuto statico del server. Ho lasciato il codice per questo a questa altra risposta .

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

Ecco uno che è molto semplice da configurare ed eseguire:

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

Semplicemente dice che l’applicazione dovrebbe essere eseguita su un server web. Ho avuto lo stesso problema con Chrome, ho avviato Tomcat e ho spostato la mia applicazione lì, e ha funzionato.

ER. Ho appena trovato alcune parole ufficiali “Tentando di caricare moduli AMD non montati, i moduli AMD remoti che usano il dojo / plug-in di testo non funzioneranno a causa di restrizioni di sicurezza incrociate. (Le versioni costruite dei moduli AMD non sono influenzate dal fatto che le chiamate a dojo / testo vengono eliminate da sistema di compilazione.) ” https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Un modo in cui ha funzionato caricando i file locali li sta usando nella cartella del progetto invece che all’esterno della cartella del progetto. Crea una cartella sotto i file di esempio del progetto in modo simile al modo in cui creiamo per le immagini e sostituisci la sezione in cui utilizzi il percorso locale completo diverso dal percorso del progetto e utilizza l’url relativo del file nella cartella del progetto. Ha funzionato per me

Per tutti voi su MacOS … impostate un semplice LaunchAgent per abilitare queste fantastiche funzionalità nella vostra copia di Chrome

Salva un plist , chiamato qualunque ( launch.chrome.dev.mode.plist , ad esempio) in ~/Library/LaunchAgents con contenuti simili a …

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

Dovrebbe avviarsi all’avvio .. ma puoi forzarlo a farlo in qualsiasi momento con il comando del terminale

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

TADA! 😎 💁🏻 🙊 🙏🏾

  • Installa il webserver locale per java ad es. Tomcat, per php puoi usare la lampada ecc
  • Rilasciare il file json nella directory del server delle app accessibile pubblicamente
  • Elemento dell'elenco

  • Avvia il server dell’app e dovresti essere in grado di accedere al file da localhost

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

Non è ansible caricare file locali statici (es .: svg) senza server. Se nel computer è installato NPM / YARN, è ansible configurare un semplice server http utilizzando ” 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.

Sospetto che sia già stato menzionato in alcune delle risposte, ma modificherò leggermente questo aspetto per avere una risposta operativa 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. Cambia nella tua directory di lavoro, dove index.html / yoursome.html risiede.

  4. Avvia il tuo server http eseguendo il comando http-server -c-1

Aprire il browser Web all’indirizzo http://localhost:8080 o http://localhost:8080/yoursome.html , a seconda del nome file html.

Molti problemi per questo, con il mio problema manca ‘/’ 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.