Ionic 2/Angular 2/CORS: nagłówki HTTP nie są wysyłane z żądaniem

Question

Pracuję nad projektem wykorzystującym Ionic 2 (2.0.0-beta.10). Próbuję przekazać token upoważnienia wraz z żądaniem. Jednak nagłówek nie jest wysyłany. Również inne nagłówki, które próbowałem przekazać wraz z żądaniem, nie są wysyłane.

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!"); 
}); 

Moja REST API odbiera ten wniosek z następującymi nagłówkami:

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 

Dane (korpus) przychodzi we właściwym, jedynym problemem nagłówki nie mogę rozwiązać. Każda pomoc byłaby bardzo ceniona.

Answer 1

Jeśli wywołujesz REST API (example.com w twoim przykładzie), który znajduje się w innej domenie niż twoja aplikacja Angular 2/Ionic (evil.com w twoim przykładzie), musisz skonfigurować serwer REST API do powrót ten nagłówek:

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

co pozwoli przeglądarka do wysyłania żądań HTTP asynchroniczny z evil.com hosta do odpoczynku serwer aPI.

Odbywa się to poprzez włączenie CORS na serwerze api, możesz przeczytać o tym nieco więcej.

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

Kilka bibliotek dla backend, które umożliwiają krzyżowe żądań pochodzenia:

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

https://pypi.python.org/pypi/Flask-Cors/ - Python Cors biblioteki Kolby

A lista nadal prawie dowolne inne ramy backendu.

Answer 2

Stringify JSON to nie działa naprawdę przez cały czas. Najpierw należy przekonwertować dane JSON na StringQuery, aby serwer zrozumiał go odpowiednio i znacznie szybciej.

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

następnie dokonać czynność poczta lub metoda

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!"); 
    }); 
} 

Używam tego kodu i uzyskać sukces zbyt żądania POST.