Nagłówki Angular2/Http (POST)

Question

Nie mogę zmienić nagłówków podczas wykonywania żądania POST. Próbowałem kilka rzeczy:

prostą klasę:

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

Próbowałem:

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'); } 
    ); 
} 

żaden z nich pracują. Nie zapomniałem zaimportować żadnej z klas.

Używam Google Chrome. Sprawdzam więc kartę "Sieć", moje żądanie jest tam i mówi, że mój typ treści to tekst/zwykły.

Czy to błąd, czy też robię coś nie tak?

UPDATE zapomniałem zaimportować klasę Nagłówki z Angular2/http:

import {Headers} from 'angular2/http'; 

Answer 1

myślę używasz wsparcie HTTP Angular2 właściwy sposób. Zobacz ten działający plunkr: https://plnkr.co/edit/Y777Dup3VnxHjrGSbsr3?p=preview.

Być może zapomniałeś zaimportować klasę Headers. Zrobiłem ten błąd jakiś czas temu i nie było błędu w konsoli JavaScript, ale nagłówki, które próbowałem ustawić, nie zostały ustawione. Na przykład odnośnie nagłówka Content-Type miałem text/plain zamiast application/json. Można odtworzyć to w plunkr I udostępnionym przez spółkę komentując Headers w imporcie ...

Powyżej znajduje się pełna próbka robocza (import w zestawie):

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

Nadzieję, że to pomaga, Thierry