Ionic 2/Angular 2/CORS: HTTP-Header werden nicht mit Anfrage gesendet

Question

Ich arbeite an einem Projekt mit Ionic 2 (2.0.0-Beta.10). Ich versuche, ein Autorisierungs-Token mit der Anfrage zu übergeben. Der Header wird jedoch nicht gesendet. Auch andere Header, die ich mit der Anfrage übergeben habe, werden nicht gesendet.

let url = 'http://www.example.com/savedata'; 
let data = JSON.stringify({ email: 'test@test.com', password: '123456' }); 

let headers = new Headers(); 

headers.append('Content-Type', 'application/json'); 
headers.append('Authorization', 'Bearer ' + "tokenContent"); 

let options = new RequestOptions({ headers: headers }); 

this.http.post(url, data, options).map(res => res.json()).subscribe(data => { 

       console.log("it worked"); 

}, error => { 
       console.log("Oooops!"); 
}); 

Mein REST API empfängt diese Anforderung mit den folgenden Überschriften:

Host:    www.example.com 
Connection:   keep-alive 
Access-Control-Request-Method: POST  
Origin:    http://evil.com/  
User-Agent:   Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 
Access-Control-Request-Headers: authorization, content-type 
Accept:    */* 
Referer:   http://localhost:8100/?restart=794567 
Accept-Encoding:  gzip, deflate, sdch 
Accept-Language:  en-US,en;q=0.8 

Die Daten (Körper) kommt in richtig, nur die Header Problem kann ich nicht lösen. Jede Hilfe wäre sehr willkommen.

Answer 1

Wenn Sie die REST-API aufrufen (in Ihrem Beispiel beispiel.com), die sich in einer anderen Domäne befindet als Ihre Angular 2/Ionic-Anwendung (in Ihrem Beispiel evil.com), müssen Sie den REST-API-Server konfigurieren Rück diesen Header:

Access-Control-Allow-Origin: http://evil.com 

dem der Browser asynchroner HTTP-Anfragen von evil.com Host an den Rest api-Server senden können.

Es ist getan, indem Sie CORS auf dem Rest-API-Server aktivieren, können Sie darüber ein wenig mehr lesen.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Mehrere Bibliotheken für das Backend, die Quer Herkunft Anfragen ermöglichen:

https://github.com/expressjs/cors - NodeJS/Express

https://pypi.python.org/pypi/Flask-Cors/ - Bibliothek Python cors für Flask

und die Liste geht weiter für fast jedes andere Backend-Framework.

Answer 2

String JSON dies funktioniert nicht wirklich zu jeder Zeit. Zuerst müssen Sie Ihre JSON-Daten in StringQuery konvertieren, damit sie vom Server richtig und viel schneller verstanden werden.

public StringQuery(jsonString) { 
     return Object.keys(jsonString).map(function (key) { 
      return encodeURIComponent(key) + '=' + encodeURIComponent(jsonString[key]); 
     }).join('&'); 
     } 

dann machen Sie Ihre Post-Funktion oder Methode

public post(){ 
let url = 'http://www.example.com/savedata'; 
let data = this.StringQuery({ email: 'test@test.com', password: '123456' }) 




    let headers = new Headers(); 

    headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
    headers.append('Authorization', 'Bearer ' + "tokenContent"); 

    let options = new RequestOptions({ headers: headers }); 

    this.http.post(url, data, options).map(res => res.json()).subscribe(data => { 

        console.log("it worked"); 

    }, error => { 
        console.log("Oooops!"); 
    }); 
} 

ich diesen Code zu verwenden und Erfolg Post-Anforderung erhalten.