web-dev-qa-db-fra.com

Récupérer le XML à partir de HTTPClient sur Angular 5

J'essaie de récupérer un fichier XML à partir d'une API SOAP à l'aide de HttpClient from Angular

Voici ce qu'il y a sur mon app.component.html:

<input type="submit" value="test POST" (click)="onClickMe()"/>

C'est sur mon app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  results: string[];
  constructor(private http: HttpClient) {
    console.log('constructor opened');

  }
  ngOnInit(): void{
    console.log('onInit opened'); 

    }

  onClickMe(){
      var emp = '<<credentials to the webservice>>';
      var login = '<<credentials to the webservice>>';
      var pass = '<<credentials to the webservice>>';
      var id = "<<credentials to the webservice>>";

      const body = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<soap12:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap12=\"http://www.w3.org/2003/05/soap-envelope\">\r\n  <soap12:Body>\r\n    <Lista xmlns=\"http://GSMMX.WebService/\">\r\n      <Emp>"+emp+"</Emp>\r\n      <Login>"+ login +"</Login>\r\n      <Senha>"+ pass +"</Senha>\r\n      <id>"+ id +"</id>\r\n    </Lista>\r\n  </soap12:Body>\r\n</soap12:Envelope>";
      const url = "<<webserviceURL>>";
      console.log('onClickme opened');

      this.http.post(url, body, {
        headers: new HttpHeaders()
        .set('Content-Type', 'text/xml') 
        .append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS') 
        .append('Access-Control-Allow-Origin', '*')
        .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method")
  }).subscribe(data => {
        console.log(data);

      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          // A client-side or network error occurred. Handle it accordingly.
          console.log('An error occurred:', err.error.message);
        } else {
          // The backend returned an unsuccessful response code.
          // The response body may contain clues as to what went wrong,
          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }
      }
    );

  }


}

J'ai donc fait la même demande en utilisant Postman et copié l'URL et le corps exactement de la même manière que POST a fonctionné. J'ai essayé de le faire en utilisant Angular 5 et cela ne fonctionne pas, cela renvoie le message suivant:

Backend returned code 200, body was: [object Object]

Est-ce que quelqu'un sait comment je fais ce travail? La demande reçoit un code 200 mais la réponse ne vient pas dans le bon sens.

J'apprécie toute aide!

xmlangularsoapangular-httpclient
4
spaceman

Si vous voulez obtenir la réponse sous forme de texte. Vous pouvez essayer d'ajouter {responseType: 'text'}.

{
        headers: new HttpHeaders()
        .set('Content-Type', 'text/xml') 
        .append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS') 
        .append('Access-Control-Allow-Origin', '*')
        .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method")
  , responseType:'text'}
2
Sameh Awad

Si { responseType: 'text' } n'a pas fait l'affaire, essayez { responseType: 'text' as 'text' }.

Pour convertir la réponse XML en JSON, j'ai utilisé le script de ce site Web XMLParser basé sur Lodash.

Une autre solution que vous pouvez utiliser est xml2js .

1
IonutGorgos