XMLHttpRequest non può caricare il file. Le richieste tra origini sono supportate solo per HTTP

Ricevo il seguente errore:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

Mi rendo conto che a questa domanda è già stata data una risposta, ma non ho ancora trovato una soluzione al mio problema. Ho provato a eseguire chrome.exe --allow-file-access-from-filesdal prompt dei comandi e ho spostato il file nel file system locale, ma ricevo ancora lo stesso errore.

Apprezzo tutti i suggerimenti!

Se stai facendo qualcosa come scrivere HTML e Javascript in un editor di codice sul tuo personal computer e testare l'output nel tuo browser, probabilmente riceverai messaggi di errore su Cross Origin Requests. Il tuo browser renderà HTML ed eseguirà Javascript, jQuery, angularJs nel tuo browser senza bisogno di configurare un server. Ma molti browser web sono programmati per controllare gli attacchi cross-site e bloccheranno le richieste. Non vuoi che chiunque sia in grado di leggere il tuo disco rigido dal tuo browser web. Puoi creare una pagina web completamente funzionante utilizzando Notepad ++ che eseguirà Javascript e framework come jQuery e angularJs; e prova tutto semplicemente usando la voce di menu Notepad ++,RUN, LAUNCH IN FIREFOX. È un modo semplice e carino per iniziare a creare una pagina web, ma quando inizi a creare qualcosa di più del layout, CSS e semplice navigazione tra le pagine, hai bisogno di un server locale configurato sulla tua macchina.

Ecco alcune opzioni che utilizzo.

1. Testa la tua pagina web localmente su Firefox, quindi distribuiscila sul tuo host.
2. oppure: eseguire un server locale

Prova su Firefox, distribuisci su host

1. Firefox attualmente consente le richieste di origine incrociata da file forniti dal disco rigido
2. Il tuo sito di web hosting consentirà le richieste ai file nelle cartelle come configurato dal file manifest

Esegui un server locale

• Esegui un server sul tuo computer, come Apache o Python
• Python non è un server, ma eseguirà un semplice server

Esegui un server locale con Python

Ottieni il tuo indirizzo IP:

• Su Windows: apri il "Prompt dei comandi". Tutti i programmi, accessori, prompt dei comandi
• Gestisco sempre l' Command Promptas Administrator. Fare clic con il pulsante destro del mouse sulla Command Promptvoce di menu e cercareRun As Administrator
• Digita il comando: ipconfige premi Invio.
• Cerca: indirizzo IPv4. . . . . . . . 12.123.123.00
• Ci sono siti web che visualizzano anche il tuo indirizzo IP

Se non hai Python, scaricalo e installalo.

Utilizzando il "Prompt dei comandi" è necessario accedere alla cartella in cui si trovano i file che si desidera utilizzare come pagina Web.

• Se è necessario tornare alla directory C: \ Root, digitare cd /
• digita cd Drive: \ Folder \ Folder \ etc per arrivare alla cartella in cui si trova il tuo file .Html (o php, ecc.)
• Controlla il percorso. digitare: percorso al prompt dei comandi. Devi vedere il percorso della cartella in cui si trova python. Ad esempio, se python è in C: \ Python27, allora devi vedere quell'indirizzo nei percorsi elencati.
• Se il percorso della directory Python non è nel percorso, è necessario impostare il percorso. digita: help path e premi Invio. Vedrai l'aiuto per il percorso.
• Digita qualcosa come: path c: \ python27% path%
• % path% conserva tutti i tuoi percorsi attuali. Non vuoi cancellare tutti i tuoi percorsi attuali, aggiungi semplicemente un nuovo percorso.
• Crea il nuovo percorso DALLA cartella in cui desideri servire i file.
• Avvia il server Python: Tipo: python -m SimpleHTTPServer portDove "porta" è il numero della porta che desideri, ad esempiopython -m SimpleHTTPServer 1337
• Se lasci la porta vuota, il valore predefinito è la porta 8000
• Se il server Python si avvia correttamente, vedrai un messaggio di errore.

Esegui l'applicazione Web in locale

• Apri un browser
• Nella riga dell'indirizzo digitare: http://your IP address:port
• http://xxx.xxx.x.x:1337 o http://xx.xxx.xxx.xx:8000per l'impostazione predefinita
• Se il server funziona, vedrai un elenco dei tuoi file nel browser
• Fai clic sul file che desideri pubblicare e dovrebbe essere visualizzato.

Soluzioni più avanzate

• Installa un editor di codice, un server web e altri servizi integrati.

Puoi installare Apache, PHP, Python, SQL, Debugger ecc. Tutti separatamente sulla tua macchina, e poi passare molto tempo a cercare di capire come farli funzionare tutti insieme, o cercare una soluzione che combini tutte queste cose.

Mi piace usare XAMPP con NetBeans IDE. Puoi anche installare WAMP che fornisce una User Interfaceper la gestione e l'integrazione di Apache e altri servizi.

Soluzione semplice

Se stai lavorando con file html / js / css puri.

Installa questa piccola app server ( link ) in Chrome. Apri l'app e punta il percorso del file alla directory del tuo progetto.

Vai all'URL mostrato nell'app.

Modifica: soluzione più intelligente utilizzando Gulp

Passaggio 1: per installare Gulp. Esegui il seguente comando nel tuo terminale.

npm install gulp-cli -g
npm install gulp -D

Passaggio 2: all'interno della directory del progetto creare un file denominato gulpfile.js. Copia il seguente contenuto al suo interno.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

Passaggio 3: installa il plug-in gulp di sincronizzazione del browser. Nella stessa directory in cui è presente gulpfile.js, eseguire il seguente comando

npm install browser-sync gulp --save-dev

Passaggio 4: avvia il server. Nella stessa directory in cui è presente gulpfile.js, eseguire il seguente comando

gulp serve

Questo errore si verifica perché stai solo aprendo documenti html direttamente dal browser. Per risolvere questo problema dovrai fornire il tuo codice da un server web e accedervi su localhost. Se hai installato Apache, usalo per servire i tuoi file. Alcuni IDE hanno server web integrati, come IDE JetBrains, Eclipse ...

Se hai configurato Node.Js, puoi usare http-server . Corri npm install http-server -ge sarai in grado di usarlo in un terminale come http-server C:\location\to\app. Kirill Fuchs

Per aggiungere alla complessa risposta di Alan Wells , ecco una soluzione rapida

Esegui un server locale

puoi servire qualsiasi cartella nel tuo computer con Serve

Innanzitutto, naviga utilizzando la riga di comando nella cartella che desideri servire.

Poi

npx i -g serve
serve

o se desideri provare Serve scaricandolo

npx serve

e questo è tutto! Puoi visualizzare i tuoi file su http: // localhost: 5000

Stavo affrontando questo errore mentre distribuivo il mio progetto API Web localmente e stavo chiamando il progetto API solo con questo URL indicato di seguito:

localhost // myAPIProject

Poiché il messaggio di errore dice che non è http: //, ho cambiato l'URL e ho inserito un prefisso http come indicato di seguito e l'errore è scomparso.

http: // localhost // myAPIProject

Se usi l' IDE Javascript di WebStorm , puoi semplicemente aprire il tuo progetto da WebStorm nel tuo browser. WebStorm avvierà automaticamente un server e non riceverai più nessuno di questi errori, perché ora stai accedendo ai file con i protocolli consentiti / supportati (HTTP).

Dipende dalle tue esigenze, ma c'è anche un modo rapido per controllare temporaneamente il tuo JSON (fittizio) salvando il tuo JSON su http://myjson.com . Copia il link api e incollalo nel tuo codice javascript. Viola! Quando vuoi distribuire i codici, non devi dimenticare di cambiare quell'URL nei tuoi codici!

Posiziona la cartella del tuo progetto negli htdocs della directory Xampp Avvia il tuo server Apache usando il pannello di controllo xampp quindi apri un browser goto localhost / projectfolder quindi inizia a funzionare