Angular $http.post not returning XML

Question

I am trying to call a web service with angular, but not having much luck. The service takes a POST request with no POST body, and returns XML. I can confirm that the service works with a raw XMLHttpRequest call:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4)
    console.log(xhr.responseText); // Returns data
}

xhr.open("POST", "https://api.bmreports.com/BMRS/MessageListRetrieval/v1/?APIKey=9eu73tsryf1sons&ParticipantId=INNOGY01&PublicationFrom=1970-01-01&PublicationTo=3000-01-01&ServiceType=XML", true);

xhr.send(null);

And with jQuery:

$.ajax({
  url: 'https://api.bmreports.com/BMRS/MessageListRetrieval/v1/?APIKey=9eu73tsryf1sons&ParticipantId=INNOGY01&PublicationFrom=1970-01-01&PublicationTo=3000-01-01&ServiceType=XML',
  type: "POST",
  success: function(data){
    console.log(data); // Returns data
  },
  error: function (hxr, status, errorThrown){
    console.log(status);
  }
});

However, I'm not getting anything back when I try it with angular's $http service:

angular.module('TestApp',[])
.controller('TestController', function($scope, $http){
    $http({
        method: "POST",
        url: 'https://api.bmreports.com/BMRS/MessageListRetrieval/v1/?APIKey=9eu73tsryf1sons&ParticipantId=INNOGY01&PublicationFrom=1970-01-01&PublicationTo=3000-01-01&ServiceType=XML'
    }).success(function(data, status, headers, config){
        console.log("data:");
        console.log(data); // Returns null
    }).error(function(data, status, headers, config){
        console.log("error status:");
        console.log(status); // No errors returned      
    })
})

EDIT: Using the $http.post shortcut method:

angular.module('TestApp',[])
.controller('TestController', function($scope, $http){
    $http.post(
        'https://api.bmreports.com/BMRS/MessageListRetrieval/v1/?APIKey=9eu73tsryf1sons&ParticipantId=INNOGY01&PublicationFrom=1970-01-01&PublicationTo=3000-01-01&ServiceType=XML'
    ).success(function(data, status, headers, config){
        console.log("data:");
        console.log(data);
    }).error(function(data, status, headers, config){
        console.log("error status:");
        console.log(status);        
    })
})

Note that the $http.post shortcut method has a second data parameter, but I have no data to pass. If I include the parameter as null, Chrome says:

Request header field Content-Type is not allowed by Access-Control-Allow-Headers

Since the $http.post shortcut method does not complain about missing out the data parameter, I have deliberately missed it out.

I need to be able to make the POST call with no data, as is possible with a raw XMLHttpRequest call, or jQuery's ajax method. What might be going wrong? Thanks!

(NB, the API is public, so don't worry about the API key I've posted. It's a valid API key, which I'll keep active only while this question is open)

The syntax for post is $http.post docs.angularjs.org/api/ng/service/$http#! — jcubic
– jcubic, Commented Mar 16, 2015 at 12:47
Thanks jcubic. It wasn't really about whether I was using the $http({}) style, or the $http.post() shortcut method, but I've updated the question for posterity anyway. Thanks for your help. — pinksy
– pinksy, Commented Mar 16, 2015 at 13:04

sylwester · Accepted Answer · 2015-03-16 12:55:02Z

5

Angular by default expecting to get JSON from your server you can change that by adding

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope, $http) {

  $scope.xml = "";


  $http({
    method: "POST",
    url: 'https://api.bmreports.com/BMRS/MessageListRetrieval/v1/?APIKey=9eu73tsryf1sons&ParticipantId=INNOGY01&PublicationFrom=1970-01-01&PublicationTo=3000-01-01&ServiceType=XML',
    headers: {
      "Accept": "application/xml"
    }
  }).success(function(data, status, headers, config) {
    console.log("data:");
    console.log(data); // Returns null
    $scope.xml = data;
  }).error(function(data, status, headers, config) {
    console.log("error status:");
    console.log(status); // No errors returned      
  })


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">
   {{xml}}
  </div>
</div>

to your request

answered Mar 16, 2015 at 12:55

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pinksy Over a year ago

Thank you sylwester! So it was really just a case of adding the header! That's fantastic - thanks again :)

Collectives™ on Stack Overflow

Angular $http.post not returning XML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related