web-dev-qa-db-fra.com

Comment définir Content-Type et Accept dans l'erreur angular2 obtention 415 Type de support non pris en charge

Comment définir Content-Type et Accepter dans angular2?

J'essaie d'envoyer un post-appel avec le type de contenu (application/json) dans l'en-tête. Mais, pour une raison quelconque, il n'envoie pas, il envoie toujours du texte/en clair; charset = UTF-8 dans le type de contenu Je reçois 415 types de support non supportés lorsque j'essaie de faire un appel de service REST. Je pense que je dois définir le type et le type de contenu correctement d'une manière ou d'une autre non défini à partir du code que je veux ci-dessous la requête d'en-tête

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

Le code est ci-dessous

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


      }
    }
httpserviceangular
24
bonjour

Voici une manière plus propre, qui est écrite dans la documentation 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)

Notez que je crois que cela n’est requis que pour les requêtes POST.

53
wli

Tout d’abord, vous utilisez des importations incorrectes de angular2/angular2 maintenant angular2 est en version bêta, donc presque toutes les importations ont été modifiées. Lisez cette réponse pour toutes les listes d’importations.

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

si je ne me trompe pas, vous souhaitez appeler la demande de publication avec REST Api je pense et vous souhaitez envoyer content type='application/json' _ vous devez donc envoyer le même message en l’ajoutant à Header Je publie un exemple d’utilisation d’en-tête pour utiliser le type de contenu comme ci-dessous.

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

Je suppose un exemple factice en utilisant PostRequest comme nom de méthode. pour plus de détails concernant HTTP et REST appel d'API, reportez-vous ici: https://stackoverflow.com/a/34758630/5043867

6
Pardeep Jain

Pour 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)
2
Kamruzzaman