Unable to call my restful service from angularjs app using $http - json

Question

I am unable to read JSON from rest webservice using angularjs $http. I have a simple rest webservice in a different project which return JSON. When I try to hit rest service from angular it goes to error part.
Below is my code:
Restful service in Java :
package com.demoapp.rest;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.UriInfo;
import javax.ws.rs.Consumes;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.GET;
import javax.ws.rs.Produces;
/**
* REST Web Service
*/
#Path("Employee")
public class EmployeeResource {
#Context
private UriInfo context;
/**
* Creates a new instance of EmployeeResource
*/
public EmployeeResource() {
}
/**
* Retrieves representation of an instance of com.demoapp.rest.EmployeeResource
* #return an instance of java.lang.String
*/
#GET
#Produces("application/json")
public String getJson() {
//TODO return proper representation object
return "({\"id\":3,\"name\":\"Joe\"})";
}
/**
* PUT method for updating or creating an instance of EmployeeResource
* #param content representation for the resource
* #return an HTTP response with content of the updated or created resource.
*/
#PUT
#Consumes("application/json")
public void putJson(String content) {
}
}
Angularjs code :
angular.module('myApp.controllers', [])
.controller('MyCtrl1', ['$scope', '$http', function($scope, $http) {
$http.jsonp(
/*Doesn't work*/ 'http://localhost:8080/mavenproject1/webresources/Employee?callback=JSON_CALLBACK'
/*Works*/ /*'http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&callback=JSON_CALLBACK'*/
)
.success(function(data) {
console.log('Success '+data);
})
.error(function(data) {
console.log('Error '+data);
});
}])
.controller('MyCtrl2', [function() {
}]);
I am getting error for first url (localhost..) and same angularjs code works for another public restful service.
Can anyone please tell why angularjs returns error in console for (http://localhost..) restful service and goes to success for (http://api.openweathermap.org/....) ?
Where exactly am I going wrong?

Answer 1

You are trying to access a resource by jsonp but your REST service returns plain json. You need to use
$http.get('http://localhost:8080/mavenproject1/webresources/Employee').
The url http://api.openweathermap.org works because they return the jsonp format. You need this format if you make request to other domains. Jsonp means that the result is wrapped in a function call. The name of the function is dynamically generated and is specified by the callback parameter in your example.
EDIT (results from the discussion above - in production this app will also run on two different servers, so there are the following options to solve the problem)
1) you may use the Access-Control-Allow-Origin header in your jboss server. Have a look at this answer how to do this: Set response headers not using filter - RESTeasy.
2) you may use a reverse proxy in front of your tomcat and your jboss server. For example the apache webserver can do this. Here is an answer that addresses this problem: How to correctly configure a reverse proxy with Apache, to be used for cross-domain AJAX?
3) you can switch to jsonp - this is a little bit complicated because it is not supported directly by RESTEasy. Have a look at this post: How enable JSONP in RESTEasy?