CODEWITHSUNDEEP
jsonweb-servicesangularjsrest
skool99
skool99

Reputation: 830

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


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?

Upvotes: 0

Views: 6825

Answers (1)

michael
michael

Reputation: 16351

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?

Upvotes: 2

Related Questions