angular2 で Content-Type と Accept を設定するにはどうすればいいですか?
ヘッダーにコンテンツタイプ(application/json)を指定してPOST呼び出しを送信しようとしていますが、何らかの理由で送信されず、常にコンテンツタイプに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
コードは以下の通りです
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('/');
});
}
}
ベストアンサー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 クエリにのみ必要であると考えられることに注意してください。