Http 如何在angular2中设置内容类型和接受获取错误415不支持的媒体类型

如何设置内容类型并接受angular2？

我正在尝试发送标题中包含内容类型（application/json）的post调用 但由于某种原因，它不发送，它总是发送文本/纯文本；内容类型中的字符集=UTF-8 当我尝试进行REST服务呼叫时，我得到415个不支持的媒体类型。我想我需要正确地设置类型和内容类型，因为它不是从代码中设置的 我想要什么 在我们下方标题请求

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


      }
    }

---

首先，您使用了来自

angular2/angular2

的不正确导入，现在angular2已处于测试阶段，因此几乎所有导入都已更改。请读出所有进口清单的答案

然后，据我所知，您希望使用RESTAPI调用Post请求，我认为您希望发送

content type='application/json'

，因此您必须通过将其附加到

Header来发送相同的请求

 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调用的更多详细信息，请参阅：
这里有一个更简洁的方法，它是用Angular2文档（）编写的

请注意，我认为这仅适用于POST查询。
适用于Angular 5.2.9版本

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

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

相反，你可以使用我的答案，当我们可以通过将单个值绑定到单个字段来发送时，为什么要发送单个值，即
RequestOptions
谢谢wli，但是
res.json（）.data
或
res.json（）
这取决于如何从API返回数据。可能对某人有帮助。
import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

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