2016-05-23 21 views
5

Sto tentando di eseguire la richiesta CORS con jquery buy Mi sto comportando in modo strano. Quando uso curl per eseguire la richiesta, tutto funziona correttamente. Ma quando uso jQuery le cose vanno terribilmente storte. Nella scheda "Rete" del mio browser posso controllare la richiesta e la risposta dal back-end lì è tutto corretto enter image description here ma sebbene io abbia Access-Control-Expose-Headers: Set-Cookie header ottengo null quando I prova a stamparlo usando console.log (response.getResponseHeader ("Set-Cookie")); Quando provo a stampare le intestazioni di risposta della mia richiesta AJAX nella console con console.log (response.getAllResponseHeaders()) ottengo solo questi 3 intestazioni:Intestazioni mancanti in risposta alla richiesta jQuery con CORS

Pragma: no-cache 
Cache-Control: no-cache, no-store, max-age=0, must-revalidate 
Expires: 0 

Il codice che sto usando per eseguire richieste è:

$.ajax({ 
    method: "POST", 
    url: "http://localhost:8808/storage/login", 
    data: { 
     username: email, 
     password: password, 
    }, 
    success: function(data, textStatus, response){ 
     console.log(response.getAllResponseHeaders()); 
     console.log(response.getResponseHeader("Set-Cookie")); 
     this.setState({showAlert: true, alertMessage: "You are logged in.", alertType: "success"}); 
    }.bind(this), 
    error: function (xhr, status, err) { 
     this.setState({showAlert: true, alertMessage: "Wrong email or password", alertType: "danger"}); 
    }.bind(this) 
}); 

risposta

1

Ho trovato la soluzione.

Sul lato server aggiungere queste intestazioni sulla risposta:

Access-Control-Allow-Origin: http://localhost:8080 
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE 
Access-Control-Allow-Headers: Content-Type, Authorization, Content-Length, X-Requested-With 
Access-Control-Allow-Credentials: true 

Access-Control-Allow-Credenziali: vero Questo è l'importante. Ma non puoi usare Access-Control-Allow-Origin: * con esso! È necessario specificare dominio specifico come Access-Control-Allow-Origin: http://example.com)

Sul lato client aggiornamento la richiesta ajax al seguente:

$.ajax({ 
       method: "POST", 
       url: "http://localhost:8808/storage/login", 
       data: { 
        username: email, 
        password: password, 
       }, 
       xhrFields: { 
        withCredentials: true 
       }, 
       crossDomain: true, 
       success: function(data, textStatus, response){ 
        console.log(response.getAllResponseHeaders()); 
        console.log(response.getResponseHeader("Set-Cookie")); 
        this.setState({showAlert: true, alertMessage: "You are logged in.", alertType: "success"}); 
       }.bind(this), 
       error: function (xhr, status, err) { 
        this.setState({showAlert: true, alertMessage: "Wrong email or password", alertType: "danger"}); 
       }.bind(this) 
      }); 

La parte importante è xhrFields: {withCredentials: true}, crossDomain: true.Per ulteriori informazioni vedere come Set-Cookie on Browser with Ajax Request via CORS e dopo che Sending credentials with cross-domain posts? utilizzando jQuery

realtà non è possibile accedere l'intestazione Set-Cookie con response.getResponseHeader ("Set-Cookie") in modo che il console.log() stamperà ogni tempo nullo. Puoi trovare il motivo per cui qui: $http response Set-Cookie not accessible ma puoi controllare i cookie della pagina corrente e controllare che siano impostati correttamente.

nota: l'URL di richiesta deve essere anche HTTPS per la risposta migliore.

+0

, la sua risposta perfetta ai grandi del fratello. +1 –

7

Stai facendo una richiesta di dominio incrociato?

http://www.html5rocks.com/en/tutorials/cors/:

Durante una richiesta CORS, il metodo getResponseHeader() può accedere solo semplici intestazioni di risposta. intestazioni di risposta semplici sono definiti come segue:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Valida
  • Last-Modified
  • Pragma

Se desideri che i client siano in grado di accedere ad altre intestazioni, fai devono utilizzare l'intestazione Access-Control-Expose-Headers. Il valore di questa intestazione è un elenco delimitato da virgole di intestazioni di risposta che si desidera esporre al client.

+0

Sì Sto facendo richiesta CORS e sì ho intestazione Access-Control-Expose-Headers. Guarda la mia schermata delle intestazioni di risposta dalla scheda "Rete" del mio browser http://i.stack.imgur.com/5oYYU.png –

Problemi correlati