Intestazioni Angular2/Http (POST)

Question

Non riesco a modificare le intestazioni quando faccio una richiesta POST. Ho provato un paio di cose:

classe Semplice:

export class HttpService { 
    constructor(http: Http) { 
     this._http = http; 
    } 
} 

ho provato:

testCall() { 
    let body = JSON.stringify(
     { "username": "test", "password": "abc123" } 
    ) 

    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); // also tried other types to test if its working with other types, but no luck 

    this._http.post('http://mybackend.local/api/auth', body, { 
     headers: headers 
    }) 
    .subscribe(
     data => { console.log(data); }, 
     err => { console.log(err); }, 
     {} => { console.log('complete'); } 
    ); 
} 

2:

testCall() { 
    let body = JSON.stringify(
     { "username": "test", "password": "abc123" } 
    ) 

    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); // also tried other types to test if its working with other types, but no luck 

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

    this._http.post('http://mybackend.local/api/auth', body, options) 
    .subscribe(
     data => { console.log(data); }, 
     err => { console.log(err); }, 
     {} => { console.log('complete'); } 
    ); 
} 

nessuno dei due stanno lavorando. Non ho dimenticato di importare nessuna delle classi.

Sto utilizzando Google Chrome. Quindi controllo la scheda "Rete", la mia richiesta è lì e dice che il mio Content-Type è text/plain.

È un errore o sto facendo qualcosa di sbagliato?

UPDATE Ho dimenticato di importare la classe intestazioni da Angular2/http:

import {Headers} from 'angular2/http'; 

Answer 1

Penso che si stia utilizzando il supporto HTTP di Angular2 nel modo giusto. Vedi questo plunkr di lavoro: https://plnkr.co/edit/Y777Dup3VnxHjrGSbsr3?p=preview.

Forse, hai dimenticato di importare la classe Headers. Ho fatto questo errore qualche tempo fa e non c'era alcun errore nella console JavaScript, ma le intestazioni che ho provato a impostare non erano effettivamente impostate. Ad esempio, per l'intestazione Content-Type ho avuto text/plain anziché application/json. È possibile riprodurre questo nel plunkr ho fornito a voi commentando Headers nelle importazioni ...

Ecco un esempio completo di lavoro (importazioni incluse):

import {Component} from 'angular2/core'; 
import {Http,Headers} from 'angular2/http'; 
import 'rxjs/Rx'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div (click)="executeHttp()"> 
     Execute HTTP 
    </div> 
    ` 
}) 
export class AppComponent { 
    constructor(private http:Http) { 

    } 

    createAuthorizationHeader(headers:Headers) { 
    headers.append('Authorization', 'Basic ' + 
     btoa('a20e6aca-ee83-44bc-8033-b41f3078c2b6:c199f9c8-0548-4be79655-7ef7d7bf9d20')); 
    } 

    executeHttp() { 
    var headers = new Headers(); 
    this.createAuthorizationHeader(headers); 
    headers.append('Content-Type', 'application/json'); 

    var content = JSON.stringify({ 
     name: 'my name' 
    }); 

    return this.http.post(
     'https://angular2.apispark.net/v1/companies/', content, { 
     headers: headers 
     }).map(res => res.json()).subscribe(
     data => { console.log(data); }, 
     err => { console.log(err); } 
    ); 
    } 
} 

Spero che ti aiuta, Thierry