angle2でcontent-typeとacceptを設定する方法415エラーが発生するサポートされていないメディアタイプ

Question

angle2でContent-TypeとAcceptを設定する方法は？

私は、ヘッダーにコンテンツタイプ（application/json）のポストコールを送信しようとしています。 しかし、一切の理由でそれは送信されません。常にtext/plainを送信します。 charset =コンテンツタイプのUTF-8 RESTサービスコールを作成しようとすると、415 Unsupported Media Typeが表示されます。私は私が適切に何とかそれが私たちの下に ヘッダー要求

Accept 
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Encoding 
gzip, deflate 
Accept-Language 
en-US,en;q=0.5 
Content-Length 
13 
Content-Type  
text/plain; charset=UTF-8 
Host  
enrova.debug-zone.com:8000 
Origin 
http://localhost:8000 
Referer 
http://localhost:8000/add 
User-Agent 
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0 

次のコードがあるをfoどのようなコード から設定されていないタイプとContent-typeを設定する必要があると思う

import {Component, View} from 'angular2/angular2'; 
    import { Inject} from 'angular2/di'; 
    import {Http} from 'angular2/http'; 

    export class AchievementsService { 
     constructor(@Inject(Http) private http: Http) {   
     } 

     getAchievementsOfType(type: string) : any { 
      var path = '/api/achievements/' + type; 
      return this.http.get(path); 
     } 

     getAllAchievements() : any { 
      var path = '/api/achievements'; 
      return this.http.get(path); 
     } 

     addAnAchievement(newAchievement) { 

      //var path = '/api/achievements'; 
      var path = 'http://test.com:8000/branch'; 
      return this.http.post('http://test.com:8000/branch', JSON.stringify(newAchievement),{ 
      headers: { 'Content-Type': 'application/json; charset=utf-8'} }); 

    } 

**Calling Class** 


import {Component, View} from 'angular2/angular2'; 
    import { _settings } from '../../settings' 
    import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; 
    import {Inject} from 'angular2/di'; 
    import {Router} from 'angular2/router'; 
    import {AchievementsService} from '../../services/achievementsService'; 

    @Component({ 
     selector: 'add', 
     injectables: [FormBuilder] 
    }) 
    @View({ 
     templateUrl: _settings.buildPath + '/components/add/add.html', 
     directives: [formDirectives] 
    }) 
    export class Add { 
     addAchievementForm: any; 

     constructor(@Inject(FormBuilder) private formBuilder: FormBuilder, 
     @Inject(Router) private router: Router, 
     @Inject(AchievementsService) private achievementsService: AchievementsService) { 

     this.addAchievementForm = formBuilder.group({ 
      name: [''] 

     }); 
     } 
    // This is the funtion that call post call written in achievementsService.ts 
     addAchievement() { 
     this.achievementsService.addAnAchievement(this.addAchievementForm.value) 
      .map(r => r.json()) 
      .subscribe(result => { 
      this.router.parent.navigate('/'); 
      }); 


     } 
    } 

Answer 1

ここでは、Angular2の文書（https://angular.io/docs/ts/latest/guide/server-communication.html）で書かれた、よりクリーンな方法です。

import {Headers, RequestOptions} from 'angular2/http'; 

let body = JSON.stringify({ 'foo': 'bar' }); 
let headers = new Headers({ 'Content-Type': 'application/json' }); 
let options = new RequestOptions({ headers: headers }); 

return this.http.post(url, body, options) 
       .map(res => res.json().data) 
       .catch(this.handleError) 

これはPOSTクエリにのみ必要と考えられます。

Answer 2

まず、angular2/angular2の間違ったインポートを使用しています。現在、angular2はベータ版ですので、ほぼすべてのインポートが変更されています。輸入のすべてのリストについてこの答えを読んでください。あなたはHeaderにそれを追加することによって、同じことを送信する必要があり

https://stackoverflow.com/a/34440018/5043867

は、私の理解まであなたはREST APIを使用してPOSTリクエストを呼び出したいと思い、あなたはcontent type='application/json'を送りたい私は、ヘッダーの使用例を掲載以下のようなコンテンツタイプを使用します。

import {Component, View, Inject} from 'angular2/core'; 
import {Http} from 'angular2/http'; 

PostRequest(url,data) { 
     this.headers = new Headers(); 
     this.headers.append("Content-Type", 'application/json'); 
     this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token')) 

     this.requestoptions = new RequestOptions({ 
      method: RequestMethod.Post, 
      url: url, 
      headers: this.headers, 
      body: JSON.stringify(data) 
     }) 

     return this.http.request(new Request(this.requestoptions)) 
      .map((res: Response) => { 
       if (res) { 
        return [{ status: res.status, json: res.json() }] 
       } 
      }); 
} 

私は、メソッド名としてPostRequestを使用してダミーの例を想定しています。 HTTPおよびREST API呼び出しの詳細については、こちらを参照してください。 https://stackoverflow.com/a/34758630/5043867