web-dev-qa-db-ja.com

Angular2 / Http（POST）ヘッダー

POSTリクエストを行うときにヘッダーを変更できません。いくつかのことを試しました。

単純なクラス：

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

私は試した：

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

どちらも機能していません。クラスをインポートすることを忘れませんでした。

Google Chromeを使用しています。そこで、「ネットワーク」タブを確認します。リクエストはそこにあり、Content-Typeはtext/plainです。

これはバグですか、何か間違っていますか？

[〜＃〜] update [〜＃〜] Angular2/httpからHeadersクラスをインポートするのを忘れました：

import {Headers} from 'angular2/http';
postangular
15
Angelo A

Angular2のHTTPサポートを正しい方法で使用していると思います。この作業plunkrを参照してください： https://plnkr.co/edit/Y777Dup3VnxHjrGSbsr3?p=preview 。

おそらく、Headersクラスをインポートするのを忘れました。しばらく前にこの間違いを犯し、JavaScriptコンソールにエラーはありませんでしたが、設定しようとしたヘッダーは実際には設定されていませんでした。たとえば、Content-Type私が持っていたヘッダーtext/plain の代わりに application/json。これは、インポートでHeadersにコメントすることで提供したplunkrで再現できます...

完全な作業サンプルを次に示します（インポートが含まれます）。

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

お役に立てばと思います、ティエリー

21
Thierry Templier