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

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?

Try your localhost url in your browser first, is it working properly? — Jay Shukla
– Jay Shukla, Commented Feb 11, 2014 at 10:53
Yes, localhost url works in browser. url - localhost:8080/mavenproject1/webresources/Employee and returns - ({"id":3,"name":"Joe"}) — skool99
– skool99, Commented Feb 11, 2014 at 10:54

Community · Accepted Answer · 2017-05-23 12:13:03Z

2

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?

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Feb 11, 2014 at 10:58

michael

16.4k8 gold badges57 silver badges60 bronze badges

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

8 Comments

skool99 Over a year ago

I had tried using GET but then getting below error: XMLHttpRequest cannot load localhost:8080/mavenproject1/webresources/Employee. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8383' is therefore not allowed access.

skool99 Over a year ago

My rest webservice is running on port 8080 and my angularjs web application is running on port 8383. What needs to be done in rest webservice to return JSONP so that it returns success in angularjs?

michael Over a year ago

localhost:8383 is not the same origin as localhost:8080. I guess your static content is served by another server than your backend runs. There are different ways to solve this. but it depends on your needs. you may set this header on the serve side, you can use a proxy so that your port 8080 is visible to the browser as as 8383. or you switch to jsonp. How did you run your angular app? from grunt serve?

skool99 Over a year ago

My webservice application is deployed to Jboss server and for now, the angularjs application is run using Netbeans connector in chrome. It would be helpful, if you can tell how can I switch to jsonp ?

michael Over a year ago

ok, how will your app run later in production? also on two different server?

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related