Http Get Request and JSONP not working

Question

I am using AngularJS $http for sending HTTP Get Request.

$http({
   method: 'get',
   url: 'http://cross-domain-url/api/v1/service1',
   params : {'key1' : 'value1'},
   data:'',
   headers : {'Accept': 'application/JSON', 
   'Content-Type' : 'application/JSON'},
   cache : false
}).then(function (response) {
   $waitDialog.hide();
   return response;
});

But this results in following error "Origin localhost is not allowed by Access-Control-Allow-Origin."

But when I am changing method to JSONP I am getting the correct response but that response is in XML. As content-type cannot be set using JSONP and that API by default use application/xml type. Is there any way I can request data from third party API that returns data in XML. ?

PS: As the third party is controlled by someone else so I cant change default response type of data.

Answer 1

The alternative is to use $resorce

$http.defaults.useXDomain = true;
var Srv = $resource('http://cross-domain-url/api/v1/service1', {
    key1: '@key'
});

Srv.get({
    key: 'value1'
}, function(data) {
    ...
}, function(error) {
    ...
});

Answer 2

Either change the method to 'JSONP' instead of 'GET' or put a new key:value "dataType":"JSONP"

Here, I have given the code...

$http({
   method: 'JSONP',
   url: 'http://cross-domain-url/api/v1/service1',
   params : {'key1' : 'value1'},
   data:'',
   headers : {'Accept': 'application/JSON', 
   'Content-Type' : 'application/JSON'},
   cache : false
}).then(function (response) {
   $waitDialog.hide();
   return response;
});