CODEWITHSUNDEEP
javajavascriptjsonangularjsrest
Daniel Hernández
Daniel Hernández

Reputation: 4276

Angular $http.get always get ERROR consuming local Restful Service

I have an error and I am getting confuse, I have created a simple Java EE 7 project using Jersey.

I am returning this class in my Rest Rervice:

@XmlRootElement
public class LocationDTOx {

    private Long id;        
    private String tittle;    
    private String description;        
    private Long parent;

    //Getter and setters...

And in my service class i Have:

@Path("/location")
public class LocationService {

    @GET
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    @Path("/findlocation")
    public LocationDTOx findLocation() {
        System.out.println("findlocation");
        try {
            LocationDTOx x = new LocationDTOx();
            x.setDescription("Description");
            x.setId(0l);
            x.setParent(null);
            x.setTittle("Tittle ...");
            return x;
        } catch (Exception ex) {
            Logger.getLogger(LocationService.class.getName()).log(Level.SEVERE, null, ex);
        }
        return null;
    }    

}

I am 100% sure that my rest it is working , if I put this in my browser:

http://localhost:8080/BIReportL-war/rest/location/findlocation

I get this Json String:

{"description":"Description","id":0,"tittle":"Tittle ..."}

The deal is in my angular code, the code where I am calling the rest service from angular it is getting executed but it is just giving me the error part:

app.controller('questionsController', function ($scope, $http) {
    //var url = "http://localhost:8080/BIReportL-war/rest/location/findlocation";
    //var url = "http://www.w3schools.com/angular/customers.php";
    var url = "http://127.0.0.1:8080/BIReportL-war/json.json";
    $http.get(url)
        .success(
            function (data, status, headers, config) {
                alert("success");   
            })
        .error(function(data, status, headers) {
          alert('Repos status ' + status + ' --- headers : ' + headers);
        })
        .finally(
            function() {
        });
});

I have with comments another local URL to a dummy json file that I can access it by that browser, and also I get the same result an error, the weird thing is that I tried with this rest public json file:

http://www.w3schools.com/angular/customers.php

And I get the success !! I don't know why, what I am doing or what I have wrong, I mean when I try with my local rest service, I see that it is getting called in the logs, that is a fact, but the angular client is getting into an error.

Thanks in advance for your help !

I am using: *Glassfish V4 *Angular

Well, was about the CORS Issue I just put my rest as below, so here is the SOLUTION:

@Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    @Path("/findlocation")
    public Response findLocation() {
        System.out.println("findlocation");
        try {
            LocationDTOx x = new LocationDTOx();
            x.setDescription("Description");
            x.setId(0l);
            x.setParent(null);
            x.setTittle("Tittle ...");

            return Response.ok()
                    .entity(x)
                    .header("Access-Control-Allow-Origin", "*")
                    .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
                    .build();
        } catch (Exception ex) {
            Logger.getLogger(LocationService.class.getName()).log(Level.SEVERE, null, ex);
        }
        return null;
    }

Upvotes: 0

Views: 838

Answers (3)

Eric McCormick
Eric McCormick

Reputation: 2733

If AngularJS is accessing your local REST API, the fact that you're running it in a browser on a different port, it counts as a different origin, per the rules of CORS (separate port means separate origin).

Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages.

For your Access-Control-Allow-Origin response header, either set it to all via *, or specify the alternate ports explicitly. This has to do with the fact that your browser (and AngularJS) are attempting to play by the rules, which you can find on MDN's page on same origin policy.

These "rules" don't apply when you load the resource directly in your browser, as the origin (page your browser is loading from) is the same port, as you're loading just the resource, at that origin (plus port).

[Edit]

The CORS standards included adherence to certain response headers, such as Access-Control-Allow-Origin and Access-Control-Allow-Methods.

References:

[/Edit]

Upvotes: 2

Shai M.
Shai M.

Reputation: 1314

Did you try to use relative url? var url = "/BIReportL-war/json.json";

Can you post here the entire error?

I agree with @pankajparkar it might be a CORS problem.

(Sorry for posting this 'answer', I don't have enough points for comments)

Upvotes: 0

Mark W
Mark W

Reputation: 1295

Your Jersey service is using GET (@GET) while your Angular client is using POST ($http.post(url)).

Change the Angular code to $http.get and you're good to go.

Your example of http://www.w3schools.com/angular/customers.php is working because it responds to both POST and GET, however for your scenario GET is clearly the correct HTTP verb.

Upvotes: 0

Related Questions