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


796

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.


23
Stai cercando di farlo localmente?
Wojtek,

11
Devi usare localhost, anche se il suo file locale
Neil,

22
Ma non è interdominio!
corazza,

21
Se stai usando Chrome, avviarlo dal terminale con l'opzione --allow-file-access-from-files potrebbe aiutarti.
Nickiaconis,

12
Sì, non è realmente interdominio quando il file si trova nella stessa cartella della pagina Web, ora lo è ... Ho scoperto che se usi Firefox invece di Chrome, il problema scompare.
Sphinxxx,

Risposte:


790

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.


7
Sì, sto provando a farlo usando file://, ma non capisco perché questo è permesso. Bene, sto installando Lampp credo ...
Corazza,

150
Immagina se questo è permesso e una webapp con cui l'autore della pagina usa qualcosa di simile load('file://C:/users/user/supersecret.doc')e poi carica il contenuto sul loro server usando ajax ecc.
Andreas Wong,

11
sfortunatamente, la politica è fatta per tutti i casi, non solo per i tuoi :(, quindi devi sopportarlo
Andreas Wong,

28
C'è una pagina per questo argomento nel wiki di GitHub: github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Felipe Lima,

29
Puoi anche usare l'opzione --allow-file-access-from-files in chrome. Per la mia risposta qui: stackoverflow.com/questions/8449716/...
prauchfuss

609

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

  1. È 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

3
Questo mi ha fatto risparmiare un sacco di tempo grazie. La mia installazione di Python non aveva il modulo SimpleHTTPServer ma le istruzioni del nodo funzionavano come un incantesimo.
Luca,

3
In risposta al commento di LukeP, in python 2.7 il comando funziona secondo le istruzioni $ python -m SimpleHTTPServer, che produce il messaggio: Serving HTTP on 0.0.0.0 port 8000 ...se si scrive il nome del modulo in modo errato, ad es., Si riceverà un $ python -m SimpleHttpServermessaggio di errore No module named SimpleHttpServerSi otterrà un messaggio di errore simile se si dispone di python3 installato (v. python 2.7). È possibile controllare la versione di Python con il comando: $ python --version. Puoi anche specificare la porta su cui ascoltare in questo modo:$ python -m SimpleHTTPServer 3333
7

1
Il server python fornisce i file dalla directory in cui si avvia il server. Quindi, se i file che si desidera pubblicare si trovano in / Users / 7stud / angular_projects / 1app, quindi avviare il server in quella directory, ad esempio $ cd ~/angular_projects/1app, quindi $ python -m SimpleHTTPServer. Nel tuo browser inserisci l'URL http://localhost:8000/index.html. Puoi anche richiedere i file nelle sottodirectory della directory in cui hai avviato il server, ad es.http://localhost:8000/subdir/hello.html
7

2
Ho sentito che Python è semplice e potente, proprio come il linguaggio "X", ma questo è ridicolo! Non è necessario installare XAMPP o configurare un semplice server http js con nodo per servire file statici - Un comando e boom! Grazie mille, fa risparmiare un sacco di tempo e fatica.
RD

2
ECCEZIONALE! - per Python su Windows utilizzare: python -m http.server 8080 ... o qualunque porta si desideri e quando si vuole uscire basta ctrl-c.
Kristopher,

162

In Chrome puoi usare questo flag:

--allow-file-access-from-files

Leggi di più qui.


11
@ Blairg23, tieni presente che questa soluzione richiede il riavvio di tutte le istanze di Chrome.exe per funzionare
Alex Klaus

4
Per favore, spiega come usarlo in Chrome.
Rishabh Agrahari,

@Priya Non dovrei farlo però
Suraj Jain il

Suggerirei di usare Chromium solo per il debug locale (avviandolo con flag --allow-file-access-from-files). Significa utilizzare Chrome per la navigazione Web comune e utilizzare Chromium come applicazione predefinita per il file HTML.
Alan Zhiliang Feng

Nota che fetch()comunque lo nega comunque. È necessario utilizzare XMLHttpRequestin qualche modo
Hashbrown il

63

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.


41

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.


5
+1 per il Web Server for Chromelink dell'app: è di gran lunga la soluzione più semplice e pulita per la configurazione temporanea di httpd per Chrome IMO

Mi ha salvato. La soluzione esatta
Surya

18

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.


Brillante! Stavamo per riscrivere i metodi per iniettare JSON in variabili .. ma questo funziona! webView.getSettings () setAllowFileAccessFromFileURLs (veri).;
WallyHale,

15

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

errore :localhost:8080

soluzione :http://localhost:8080


14

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

13

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.

12

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 si installa PHP o si è installato, è possibile avviare un server nella cartella: php.net/manual/es/features.commandline.webserver.php
jechaviz

12

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

PS Sorprendentemente, IntenetExplorer_Edge funziona perfettamente !!!


1
non più. Firefox e ie stanno entrambi bloccando la richiesta cors per me.
Baahubali,

inoltre non è una buona cosa accedere a pagine non
sicure

6

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 :)


4

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 .


4

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

4

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.


3

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.


1

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/


1

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


1

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! 😎 💁🏻 🙊 🙏🏾


1
  • 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
  • Voce di elenco

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


1

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.


risposta duplicata
Scott Stensland,


0

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;


0

Per gli utenti di Linux Python:

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

Non c'è motivo per cui google-chrome --allow-file-access-from-files <url>non dovrebbe funzionare ed essere più conciso?
agupta231,

@ agupta231 Il modulo webbrowser ha argomenti che consentono diversi tipi di "apertura", ad es. apri nella scheda corrente, nuova scheda, nuova finestra ecc.
Daniel Braun,

0

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'))
  1. 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 .


-1

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.



-1

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.