Access-Control-Allow-Origin: localhost

Ho problemi con la ricezione json tramite ajax, l’errore è al di sotto. Secondo le informazioni che ho trovato finora per quanto riguarda l’errore, questo sembra essere un qualche tipo di croce problema di dominio, ma non ho idea di che cosa significhi e come risolverlo.

Ci può essere un problema con l’intestazione di risposta (ho creato l’API di me e non hanno esperienze da prima), ma un 200 OK ricevuto, se l’accesso l’url direttamente nel browser.

Se accede all’url direttamente nel browser valido json è dimostrato, in modo che non dovrebbe essere il problema.

Come può essere risolto?

Nota: L’url va a un server Apache, non è un file che è stato il caso per il 95% delle domande qui su Stack che ho letto sull’argomento.

Di errore nella finestra di ispezione:

XMLHttpRequest cannot load http://localhost/api/v1/products?_=1355583847077.
Origin null is not allowed by Access-Control-Allow-Origin.
Error: error 

Codice:

    $.ajaxSetup ({
      url: "http://localhost/api/v1/products", //<--- returns valid json if accessed in the browser
      type: "GET",
      dataType: "json",
      cache: false,
      contentType: "application/json"
    })
    $.ajax({
        success: function(data){

            console.log("You made it!");
        },
        error: function(xhr) {
           console.log("Error: " + xhr.statusText);
       }
    }).done(function(data){
        console.log(data);
    })

Params

_ 1355583610778

Intestazioni

Intestazioni Di Risposta:

Connection  Keep-Alive
Content-Length  3887
Content-Type    application/json
Date    Sat, 15 Dec 2012 14:50:53 GMT
Keep-Alive  timeout=5, max=100
Server  Apache/2.2.14 (Unix) DAV/2 mod_ssl/2.2.14 OpenSSL/0.9.8l PHP/5.3.1 mod_perl/2.0.4 Perl/v5.10.1
X-Powered-By    PHP/5.3.1

Intestazioni Di Richiesta:

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language sv-SE,sv;q=0.8,en-US;q=0.5,en;q=0.3
Connection  keep-alive
Host    localhost
Origin  null
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:17.0) Gecko/17.0 Firefox/17.0

Risposta

Nulla qui…

  • stai cercando di accedere da un diverso protocollo come https , una porta diversa o un sottodominio?
  • holyredbeard, sul punto circa l’url di andare a un server Apache non è un file, mi chiedo se non conosci la differenza tra “assoluto” e “relativo” Url. Dopo alcune letture, penso che troverete che ciò che si pensa “file” richieste, sono in realtà in realtà le richieste al server stesso che si è occupato della pagina corrente. Sto indovinando che l’assenza di una “http://…” è confusa voi.
  • Ok, quindi se ho messo le API vivono in un server di questo problema sarebbe probabilmente andare via, se ho capito giusto?
  • Si dovrebbe certamente provare a servire api/v1/products dallo stesso server che serve la pagina originale – questo è un convenzionale singolo dominio del server singolo modello, adottato dalla maggior parte dei siti web. Non posso dire per certo che questo non risolverà il problema, ma sarà sicuramente eliminare problemi di domini come fonte di bug.
  • server può certamente essere su localhost… ma deve essere lo stesso dominio della pagina che si sta inviando richiesta AJAX da
InformationsquelleAutor holyredbeard | 2012-12-15



5 Replies
  1. 7

    Provare a implementare una qualche forma di JSONP meccanismo. Se si utilizza PHP potrebbe essere qualcosa di semplice come questo…

    /* If a callback has been supplied then prepare to parse the callback
     ** function call back to browser along with JSON. */
    $jsonp = false;
    if ( isset( $_GET[ 'callback' ] ) ) {
        $_GET[ 'callback' ] = strip_tags( $_GET[ 'callback' ] );
        $jsonp              = true;
    
        $pre  = $_GET[ 'callback' ] . '(';
        $post = ');';
    } //isset( $_GET[ 'callback' ] )
    
    /* Encode JSON, and if jsonp is true, then ouput with the callback
     ** function; if not - just output JSON. */
    $json = json_encode( /* data here */ );
    print( ( $jsonp ) ? $pre . $json . $post : $json );

    Tutto questo sarebbe fare è controllare per un $_GET var chiamato richiamata, e poi avvolgere l’output in una chiamata di funzione – prendendo $_GET['callback'] nome come nome di una funzione.

    Allora la vostra chiamata AJAX diventa qualcosa di simile a questo…

    $.ajax({
      type: 'GET',
      url: '/* script here */', 
      data: /* data here - if any */,
      contentType: "jsonp", //Pay attention to the dataType/contentType
      dataType: 'jsonp', //Pay attention to the dataType/contentType
      success: function (json) {
        /* call back */
      }
    });

    Quando jQuery è dato 'jsonp' come dataType/contentType si avrà cura di fornire una funzione di callback nome – e di impostazione della funzione di callback-up, ecc, nel senso che non dovete fare nulla di davvero!

    Dalla documentazione di jQuery:

    “jsonp”: Carichi JSON blocco utilizzando JSONP. Aggiunge un extra “?callback=?” alla fine dell’URL per specificare la funzione di callback. Disabilita la cache aggiungendo un parametro di stringa di query, “_=[TIMESTAMP]”, all’URL a meno che l’opzione cache è impostata su true.

    Fonte

    In chiusura; JSONP sta per essere la vostra scommessa migliore – ho incluso il codice PHP nella remota possibilità che il vostro lato server script con PHP; se così non fosse, i principi sono gli stessi. JQuery/lato client roba rimane la stessa a prescindere di tecnologie lato server però. (in generale)

    Buona fortuna 🙂

    • Grazie mille per questo tutorial risposta. Ho implementato la soluzione, però, è ancora errori. :/ Questo è ciò che errorThrown mi dice nel browser: “Errore: jQuery18308595284975599498_1355591723832 non è stato chiamato”
    • Sembra che il server non restituisce JSONP, ma ancora tornare normale JSON. :/ Come hai fatto a implementare il JSONP soluzione server-side? Se possibile, aprire la http://localhost/api/v1/products file nel browser e vedi cosa restituisce, quindi, fornire un ?callback=test aggiunto all’URL e vedere se l’uscita è correttamente avvolto all’interno di un call per test( ). Sto sperando che questo ha un senso!
    • Ho implementato la soluzione che hai fornito la tua risposta, ho controllato, in modo che se la dichiarazione è vera se richiamata per l’url. Tuttavia, quando sto per aprire manualmente l’url nel browser, tra cui ?callback=test di uscita è esattamente lo stesso senza ?richiamata=test. Strano…
    • Avete compreso qualcosa di simile alla ternario dichiarazione sull’ultima riga del frammento? È che la linea che è responsabile per l’invio di uscita avvolto – il se stesso blocco semplicemente la prepara!
  2. 20

    Sì, questo è sicuramente un cross-domain problema. Ma non preoccupatevi, ci sono due soluzioni a questo problema.

    Utilizzando JSONP

    È possibile implementare il supporto per JSONP JSON (con imbottitura) sul server (cioè Fergus Morrow soluzione). JSONP opere domini out-of-the-box, ed è fondamentalmente JSON imbottito con una chiamata di funzione.

    Nel .ajaxSetup set dataType per jsonp e poi sul lato server, è necessario assicurarsi di controllare che l’url parametro denominato callback nella richiesta. Se questo parametro è impostato, la risposta JSON deve essere imbottito di conseguenza.

    parseThis({ "json": "can", "be": "put", "in": "here" });

    Di cui sopra presuppone callback è impostato per parseThis. jQuery sarà per default generare un nome di funzione, ma è possibile ignorare questa impostazione, impostare il valore di jsonpCallback nel .ajaxSetup.

    È inoltre possibile utilizzare una scorciatoia per dire jQuery si richiede JSONP, con la semplice aggiunta ?callback=? per l’url della richiesta.

    Utilizzo Di Access-Control-Allow-Origin

    Una soluzione alternativa è impostare la Access-Control-Allow-Origin intestazione nella vostra risposta.

    Access-Control-Allow-Origin: *

    Di cui sopra consentirà qualsiasi risorsa per utilizzare il servizio cross-domain. Leggere l’articolo linkato di seguito per ulteriori informazioni su come configurare Access-Control-Allow.


    Se vuoi sapere di più su Access-Control-Origine e CORS mi raccomando questo articolo su MDN.

    • Si prega di non downvote senza commentare il perché. Non ho idea su come migliorare la mia risposta se non so cosa c’è di male 🙁
    • Ho aggiunto un +1 perché è spiegato anche la Access-Control-Allow-Origin intestazione nel tuo post; hai avuto +2 quando l’ultima volta che l’ho guardato! :/
    • La stessa persona che con voto positivo per qualche ragione cambiato e downvoted invece. Potrebbe essere stato un errore, ma mi piacerebbe sapere. Grazie per il tuo upvote 😉
  3. 7

    Ho risolto in un modo molto semplice, aggiungendo la seguente intestazione a mio codice lato server (php):

    header('Access-Control-Allow-Origin: *');
  4. 3

    Se si tratta di un ASP.NET applicazione WEB allora si può anche mettere questo nel vostro Globale.aspx:

    HttpContext.Corrente.Risposta.AddHeader(“Access-Control-Allow-Origin”, “*”);

  5. 2

    Più PHP header impostazioni

    header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type');

    Buona Fortuna

Lascia un commento