0

I am trying to use $HTTP method from angularJS to call my restful web service.

When I use my web service URL in browser I get result of APPLICATION/JSON type.

{"id":20418,"content":"Hello, World!"}

My webs service URL:

http://localhost:8082/vlinkRest/rest/employee/angular

But when I try to call my web service from angularJS within my HTML file, I get following error:

<?xml-stylesheet href="chrome://global/locale/intl.css" type="text/css"?>
<parsererror>
    XML Parsing Error: not well-formed Location: chrome://browser/content/browser.xul Line Number 1, Column 1:
    <sourcetext>{"id":20418,"content":"Hello, World!"} ^</sourcetext>
</parsererror>

This is my angularJS code:

function Hello($scope, $http) {
    $http.get('http://localhost:8082/vlinkRest/rest/employee/angular', {headers: {'Accept': 'application/json'}}).
        success(function(data) {
        alert('0');
        $scope.greeting = data;
    }).error(function (data, status, headers, config) {alert('1:'+data+':'+status+":"+headers+":");});

}

If I am using following URL my code works fine:

http://rest-service.guides.spring.io/greeting

And when I run both the URL in the browser directly they display same result in the browser. Also I checked when running directly both produce output of type:

application/json

But for my web service when executed from angularJS code gives following error in HTTPFox:

00:00:01.387    1.154   423 168 OPTIONS 200 application/xml http://localhost:8082/vlinkRest/rest/employee/angular

When I run the URL directly in browser I get following:

00:00:40.067    0.166   319 110 GET 200 application/json    http://localhost:8082/vlinkRest/rest/employee/angular

I'm probably doing something amateur but any help would be welcome!

Thanks

ajb
  • 31,309
  • 3
  • 58
  • 84
  • It sounds like despite the fact that you're asking for json, it is trying to return xml. What happens when you remove `{headers: {'Accept': 'application/json'}` from the request config? – Marc Kline May 23 '14 at 23:59
  • It is still same. I added header option thinking it will fix the issue but it did not. –  May 24 '14 at 01:06
  • Yeah, actually, I think $http by default uses `Accept: application/json` for `.get()`. When you've tested by typing the URL into the browser, have you been using [Postman](https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en) or something similar? Or just typing it into the address bar? – Marc Kline May 24 '14 at 01:13
  • I typed the URL in address bar of Firefox and tested the result using HTTPFox for Firefox. –  May 24 '14 at 23:48
  • if your server/rest endpoint runs on different origin, chrome (and some other browsers) will fire a preflight OPTIONS request for AJAX CORS requests. (check http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html for OPTIONS request). Your server also must respond with header `Access-Control-Allow-Origin: *`. (maybe similar: http://stackoverflow.com/questions/21455045/angularjs-http-cors-and-http-authentication) – pichsenmeister May 26 '14 at 23:05
  • May be you are running your app in file:///, since this is ajax request this can be happen. If you have installed nodejs, you can install a server and see console log – Blasanka Nov 28 '18 at 16:07

1 Answers1

0

Not sure what was the issue with $HTTP.. I created a service and factory and added CORSFilter filter in my application server web.xml file. Its working fine now.