Le richieste cross-origin sono supportate solo per HTTP ma non sono cross-domain

88

Sto usando questo codice per effettuare 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 tra origini 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 è interdominio.

Come posso risolvere questo problema?

javascript 
— siannone
fonte
5
Hai provato forse a utilizzare un URL HTTP invece di un percorso locale?
— Edward Thomson
1
Suggerirei di utilizzare un URL completo
— Dominic Green
2
@EdwardThomson Ha funzionato! Ma ora devo impostare allow_url_include = Onnella mia configurazione del server.
— siannone

Risposte:

76

È necessario eseguire effettivamente un server web e fare la richiesta get a un URI su quel server, piuttosto che effettuare la richiesta get su un file; ad es. cambia la riga:

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

leggere qualcosa come:

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

e anche la pagina di richiesta iniziale deve essere eseguita tramite http.

— Petesh
fonte
Questo ha funzionato come un fascino. Ora devo impostare allow_url_include = Onnella mia configurazione del server. Posso abilitarlo in sicurezza o causerà alcuni problemi di sicurezza?
— siannone
Il $ .get viene effettivamente emesso nel contesto javascript del browser web, quindi quel file deve avere il riferimento URL - il codice scritto in php può ancora fare riferimento a file locali senza problemi
— Petesh
44
In alternativa c'è la soluzione Python: (1) vai su una console fino alla cartella, (2) entra python -m SimpleHTTPServer 8888, quindi (3) naviga nel browserhttp://localhost:8888/
— geotheory
+1 questo ha aiutato molto a risolvere il mio problema. Grazie mille :)
— Praveen
5
Nota per gli utenti di Python 3: utilizzarepython -m http.server 8888
— Jelle Fresen
113

Ho avuto fortuna ad avviare Chrome con il seguente interruttore:

--allow-file-access-from-files

Su os x prova (ridigita i trattini se copi e incolla):

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 modifica le proprietà della scorciatoia di Chrome e aggiungi l'interruttore, ad es

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

alla fine del percorso "target"

— prauchfuss
fonte
7
Lavori in Google Chrome (almeno per quanto di v24) in linea di principio, ma nota che su OS X è necessario richiamare come segue: open -a 'Google Chrome' --args —allow-file-access-from-files. Nota anche: se specifichi un URL basato su file: // (piuttosto che un percorso del file system), assicurati di usare file://localhost/...invece di file:///....
— mklement0
6
L'ultima volta che ho provato a farlo in Windows, il metodo sopra non ha funzionato. Ho finito per dover avviare Chrome dal prompt del DOS con il passaggio seguente ... Imperfetto ma funzionante.
— prauchfuss
Funziona alla grande su Linux.
— user1205577
Funziona bene su OS X Yosemite 10.10.2 e Chrome versione 41.0.2272.89 (64 bit).
— The Dude
86

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

XMLHttpRequest non può caricare il file: ///home/erick/mysuperproject/mylibrary.js. Le richieste tra origini sono supportate solo per HTTP.

Chrome e altri browser moderni hanno implementato restrizioni di sicurezza per le richieste Cross Origin, il che significa che non è possibile caricare nulla tramite file: ///, è necessario utilizzare il protocollo http: // in ogni momento, anche localmente in base ai criteri Same Origin. 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 molti 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 pigri. Puoi usare SimpleHTTPServer di Python. Viene già fornito in bundle con Python, quindi non è necessario installare o configurare nulla!

Quindi cd nella directory del tuo progetto, per esempio

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

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

1 Serve HTTP sulla porta 0.0.0.0 8000 ... Quindi ora puoi tornare al tuo browser e visitare http://0.0.0.0:8000con tutti i file di directory serviti lì. Puoi configurare la porta e altre cose, basta vedere la documentazione. Ma questo trucco funziona semplicemente per me quando ho fretta di testare una nuova libreria o elaborare una nuova idea.

Ecco qua, buona programmazione!

EDIT: 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
— Pramod Alagambhat
fonte
5
La soluzione pigra è fantastica. Molto semplice, non devi fare nient'altro.
— Nico
l'equivalente esiste anche in node.js: simple-http-server
— StackHola
Su Windows 8.1, dovresti comunque installare Python no?
— J86
Uso Xampp su Windows, è semplice, anche se consiglierei di utilizzare node, inoltre non dimenticare di sbloccare la porta 80 su Skype per consentire l'esecuzione del server
— Timo Huovinen
10

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

  1. Installa express npm install express

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

  3. Metti qualcosa di simile al seguente 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 utilizzando:

node server.js

  1. Vai a http://localhost:8000/FILENAMEe dovresti vedere il file HTML che stavi cercando di caricare
— thehme
fonte
4

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

npm install -g http-server

Cambia directory nella directory da cui desideri servire i file: 

$ cd ~/projects/angular/current_project

Esegui il server:

$ http-server

che produrrà il messaggio Avvio del server http, pubblicato su:

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

Ciò ti consente di utilizzare gli URL nel tuo browser come

http: // your_ip: 8080 / index.html

— Rahul Reddy
fonte
1

Funziona meglio in questo modo. Assicurati che entrambi i file siano sul server. Quando chiami la pagina html, usa l'indirizzo web come:, http:://localhost/myhtmlfile.htmle non C::///users/myhtmlfile.html,. Assicurati inoltre che l'URL passato al 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);
                            }
                        });
                    }
                });
            });
— ken4ward
fonte
0 
REM kill all existing instance of chrome 
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files

  1. cambia il percorso di chromeLocation con il tuo.

  2. salva sopra come file .bat.

  3. trascina il tuo file sul file batch che hai creato. (Chrome offre l'opzione di ripristino delle pagine, quindi se hai pagine aperte, premi il ripristino e funzionerà).

— YJDev
fonte
0

Puoi anche avviare un server senza python usando l'interprete php.

Per esempio:

cd /your/path/to/website/root
php -S localhost:8000

Questo può essere utile se desideri un'alternativa a npm, poiché l'utilità php è preinstallata su alcuni sistemi operativi (incluso Mac).

— Pranav Kasetti
fonte
0

Per tutti gli utenti di Python:

Vai semplicemente alla cartella di destinazione nel terminale.

cd projectFoder

quindi avvia il server HTTP per Python3 +:

python -m http.server 8000

Fornisce HTTP su :: port 8000 (http: // [::]: 8000 /) ...

vai al tuo link: http://0.0.0.0:8000/

Godere :)

— Shiwanshu Kumar
fonte
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.