AngularJS not getting API Response

Question

Using AngularJS, and the CXF-JAXRS library running within an OSGi environment (KARAF), I'm trying to get a simple API response working.

The logs show that AngularJS is properly connecting to the REST service, and is properly being responded to with a 200 status code. But, in AngularJS, the information sent back isn't being retrieved.

FYI: I had to take the "http://" out of all links because StackExchange tells me I don't have enough reputation to include them. But they're there in the actual code/logs.

REST Method I'm connecting to

@GET
@Path("/test")
@Produces(MediaType.APPLICATION_JSON)
public Response test(){
    String testResponse = "Success.";
    Response responseString = Response
            .status(200)
            .entity(testResponse)
            .build();
    return responseString;
}

AngularJS Controller

        app.controller('HttpController', function($scope, $http){
        $http({
            method: 'GET',
            url: 'localhost:8181/cxf/strsoftware/test'
        }).then(function successCallback(response){
                $scope.testString = response.data;
        }, function errorCallback(response){
                $scope.testString = response;
        });
        $scope.validationString = "Controller is functional.";
    });

AngularJS Display Code

<div ng-controller="HttpController">
The response is {{ testString }}<br>
{{validationString}}

Display On AngularJS HTML Page

KARAF Log Displayed When Connecting

2017-01-10 11:42:30,133 | INFO | qtp84694963-897 | LoggingInInterceptor | 107 - org.apache.cxf.cxf-core - 3.2.0.SNAPSHOT | Inbound Message

ID: 20 Address: localhost:8181/cxf/strsoftware/test Http-Method: GET Content-Type:

Headers: {Accept=[application/json, text/plain, /], accept-encoding=[gzip, deflate, sdch, br], Accept-Language=[en-US,en;q=0.8], connection=[keep-alive], Content-Type=[null], Host=[localhost:8181], Origin=[localhost:63343], Referer=[localhost:63343/STRFrontEnd/StartScreen.html?_ijt=qsu1c8a1qskj0def9ho1rml4hv], User-Agent=[Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36]}

2017-01-10 11:42:30,135 | INFO | qtp84694963-897 | LoggingOutInterceptor | 107 - org.apache.cxf.cxf-core - 3.2.0.SNAPSHOT | Outbound Message

ID: 20 Response-Code: 200 Content-Type: application/json Headers: {Content-Type=[application/json], Date=[Tue, 10 Jan 2017 16:42:30 GMT]}

Payload: Success.

UPDATE

By opening the Inspect page on Chrome (Ctrl+Shift+I) and clicking 'Console', we discovered the following error:

angular.js:11756XMLHttpRequest cannot load localhost:8181/cxf/strsoftware/test. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

This is a Server-Side error, so we're currently implementing CORS into the Server-Side to see if that fixes the problem. Will post solution when it's found.

Answer 1

try this one, if not working replace data : '' with params : {} :

        $http({
            method: 'GET',
            url: 'localhost:8181/cxf/strsoftware/test',

            // Just to be sure! maybe you don't need it
            dataType: 'json',
            headers: {
                "Content-Type": "application/json"
            },

            //To be sure Angular does NOT remove the content-type header.
            data: '',
        }).then(function successCallback(response) {
            $scope.testString = response.data;
        }, function errorCallback(response) {
            $scope.testString = response;
        });

EDIT

View the comments below this answer to see where Shadmehr solved the problem. The solution was to implement a CORS-filter into the server-side part of the application. We were getting a Cross Region error in the browser when trying to access the API.

Answer 2

You are calling an anonymous function in the .then(). So it should be like this:

$http({
        method: 'GET',
        url: 'localhost:8181/cxf/strsoftware/test'
    }).then(function(response){
            $scope.testString = response.data;
    }, function(response){
            $scope.testString = response;
    });

Answer 3

Not sure if your js code is correct. I have also experimented with angular js and my code looked like this:

$http.get("/cxf/strsoftware/test")
  .success(function (response) {$scope.testString = response.data;});

See blueprint-cdi-example for my full code.