Le richieste di origine incrociata sono supportate solo per HTTP ma non per il dominio incrociato

Sto usando questo codice per fare una richiesta AJAX:

$("#userBarSignup").click(function(){ $.get("C:/xampp/htdocs/webname/resources/templates/signup.php", {/*params*/}, function(response){ $("#signup").html("TEST"); $("#signup").html(response); }, "html"); 

Ma dalla console JavaScript di Google Chrome continuo a ricevere questo errore:

XMLHttpRequest non può caricare file: /// C: /xampp/htdocs/webname/resources/templates/signup.php. Le richieste di origine incrociata sono supportate solo per HTTP.

Il problema è che il file signup.php è ospitato sul mio server web locale da cui viene eseguito tutto il sito Web, quindi non è un dominio incrociato.

Come posso risolvere questo problema?

È necessario eseguire effettivamente un server web e inoltrare la richiesta di ottenere un URI su quel server, anziché effettuare la richiesta di ottenere un file; per esempio cambia la linea:

  $.get("C:/xampp/htdocs/webname/resources/templates/signup.php", 

leggere qualcosa come:

  $.get("http://localhost/resources/templates/signup.php", 

e la pagina di richiesta iniziale deve essere fatta su http pure.

Ho avuto fortuna ad avviare Chrome con il seguente switch:

 --allow-file-access-from-files 

Su os x prova (ri-digita i trattini se copi pasta):

 open -a 'Google Chrome' --args -allow-file-access-from-files 

Su altri * nix run (non testato)

  google-chrome --allow-file-access-from-files 

o su Windows modificare le proprietà del collegamento Chrome e aggiungere lo switch, ad es

  C:\ ... \Application\chrome.exe --allow-file-access-from-files 

alla fine del percorso “bersaglio”

Se stai lavorando su un piccolo progetto front-end e vuoi testarlo localmente, in genere lo apriresti indirizzando la tua directory locale nel browser web, ad esempio inserendo il file: /// home / erick / mysuperproject / index .html nella barra degli indirizzi. Tuttavia, se il tuo sito sta tentando di caricare risorse, anche se sono posizionate nella tua directory locale, potresti visualizzare avvisi come questo:

XMLHttpRequest non può caricare file: ///home/erick/mysuperproject/mylibrary.js. Le richieste di origine incrociata sono supportate solo per HTTP.

Chrome e altri browser moderni hanno implementato restrizioni di sicurezza per le richieste di origine incrociata, il che significa che non è ansible caricare nulla tramite file: ///, è necessario utilizzare il protocollo http: // in qualsiasi momento, anche a livello locale. Semplice come quello, avresti bisogno di montare un server web per eseguire il tuo progetto lì.

Questa non è la fine del mondo e ci sono molte soluzioni là fuori, incluso il buon vecchio Apache (con VirtualHosts se stai eseguendo diversi altri progetti), node.js con express, un server Ruby, ecc. O semplicemente modificando il tuo impostazioni del browser.

Tuttavia esiste una soluzione più semplice e leggera per i più pigri. Puoi usare Python’s SimpleHTTPServer. Viene già fornito in bundle con python quindi non è necessario installare o configurare nulla!

Quindi, cd per la directory del progetto, ad esempio

1 cd / home / erick / mysuperproject e quindi semplicemente usa

1 python -m SimpleHTTPServer E questo è tutto, vedrai questo messaggio nel tuo terminale

1 Servire HTTP su 0.0.0.0 porta 8000 … Quindi ora puoi tornare al tuo browser e visitare http://0.0.0.0:8000 con tutti i file di directory qui serviti. È ansible configurare la porta e altre cose, basta consultare la documentazione. Ma questo semplice trucco funziona per me quando sono di fretta per testare una nuova libreria o elaborare una nuova idea.

Ecco, buon codice!

MODIFICA: in Python 3+, SimpleHTTPServer è stato sostituito con http.server. Quindi, in Python 3.3, ad esempio, il seguente comando è equivalente:

 python -m http.server 8000 

Stavo ottenendo lo stesso errore durante il tentativo di caricare semplicemente file HTML che utilizzavano dati JSON per popolare la pagina, quindi ho usato usato node.js ed express per risolvere il problema. Se non hai installato il nodo, devi prima installare il nodo .

  1. Installa Express npm install express

  2. Creare un file server.js nella cartella principale del progetto, nel mio caso una cartella sopra i file che volevo server

  3. Metti qualcosa di simile nel file server.js e leggi questo sul sito express gihub:

     var express = require('express'); var app = express(); var path = require('path'); // __dirname will use the current path from where you run this file app.use(express.static(__dirname)); app.use(express.static(path.join(__dirname, '/FOLDERTOHTMLFILESTOSERVER'))); app.listen(8000); console.log('Listening on port 8000'); 
  4. Dopo aver salvato server.js, puoi eseguire il server usando:

node server.js

  1. Vai a http://localhost:8000/FILENAME e dovresti vedere il file HTML che stavi cercando di caricare

Funziona meglio in questo modo. Assicurarsi che entrambi i file siano sul server. Quando si chiama la pagina html, utilizzare l’indirizzo Web come http:://localhost/myhtmlfile.html e non C::///users/myhtmlfile.html . Fai anche tu che l’url passato a JSON sia un indirizzo web come indicato di seguito:

 $(function(){ $('#typeahead').typeahead({ source: function(query, process){ $.ajax({ url: 'http://localhost:2222/bootstrap/source.php', type: 'POST', data: 'query=' +query, dataType: 'JSON', async: true, success: function(data){ process(data); } }); } }); }); 

Se hai installato nodejs, puoi scaricare e installare il server utilizzando la riga di comando:

 npm install -g http-server 

Cambia directory nella directory in cui vuoi servire i file da:

 $ cd ~/projects/angular/current_project 

Esegui il server:

 $ http-server 

che produrrà il messaggio Avvio di http-server, che serve su:

Disponibile su: http: // your_ip: 8080 e http://127.0.0.1:8080

Questo ti permette di usare gli URL nel tuo browser come

http: // your_ip: 8080 / index.html