Angular2/Http (POST) headers

问题:

I'm unable to change the headers when doing a POST request. I tried a couple of things:

Simple class:

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

I tried:

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

none of the two are working. I didn't forget to import any of the classes.

I'm using Google Chrome. So I check the 'Network' tab, my request is there, and it says my Content-Type is text/plain.

Is this a bug or am I doing something wrong?

UPDATE I forgot to import the Headers class from Angular2/http:

import {Headers} from 'angular2/http'; 

回答1:

I think you're using the HTTP support of Angular2 the right way. See this working plunkr: https://plnkr.co/edit/Y777Dup3VnxHjrGSbsr3?p=preview.

Perhaps, you forgot to import the Headers class. I made this mistake some time ago and there was no error in the JavaScript console but the headers I tried to set weren't actually set. For example regarding the Content-Type header I had text/plain instead of application/json. You can reproduce this in the plunkr I provided to you by commenting Headers in the imports...

Here is a complete working sample (imports included):

import {Component} from 'angular2/core'; import {Http,Headers} from 'angular2/http'; import 'rxjs/Rx';  @Component({   selector: 'my-app',    template: `     
       Execute HTTP     
   ` }) 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); }       );   } } 

Hope it helps you, Thierry

文章来源: Angular2/Http (POST) headers