1

the service is working on spring But when i try to call a service in angular , the result object is empty and nothing is returned

service code :

public class CalculatorController {

@CrossOrigin(origins = "http://localhost:8090")
@GetMapping("/calc/{number1}/{number2}")
public Calculator calc(@PathVariable int number1, 
            @PathVariable int number2){
        Calculator c = new Calculator(number1 , number2) ;
    return c;
}

}

controller js code :

angular.module("myApp", [])
.controller("myCtrl", function($scope , $http) {
    	$http.get('http://localhost:8090/calc/5/8').
    	then(function (response)
    			{ $scope.result = response.data; }) ;
    	
    });

html code :

<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<head>
		<title>Hello AngularJS</title>
		<script src="moule.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
	<div ng-controller="myCtrl">
	<p><span class="add">add is {{ result.add }}</span></p>
	<span class="sub">sub is {{ result.sub }}</span>
	</div>

</body>
</html>

thanks in advance

Improve this question
4
  • Your client and server side are on different ports (different projects)? Commented Apr 8, 2017 at 19:09
  • sorry post is edited Commented Apr 8, 2017 at 19:09
  • yea it is different Commented Apr 8, 2017 at 19:09
  • what should i do Commented Apr 8, 2017 at 19:09

2 Answers 2

Reset to default
2

Your CORS filter (@CrossOrigin) is set to http://localhost:8090 but seems like this is where your server side code reside. CORS should allow a source outside of your server to query your API, that means you need to provide your client side port information.

Lets say your server side runs on 8090 and your client on 8080. Your filter on the server side should allow 8080 to use the API from a browser.

Try to change the CORS filter to match your client side not the server side.

Also, look in chrome debug tools (F12) to see if you have a CORS exception.

More information about CORS:

  1. Cross-origin resource sharing
  2. Understanding CORS
  3. Enabling Cross Origin Requests for a RESTful Web Service
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

@CrossOrigin annotation is used to allow CORS - cross-origin resource sharing. A browser won't allow you to use an API outside of your domain unless it is allowed by CORS filter to access it. So that means if your client side is running on port 8080 and you try to query your server side code on port 8090 and the server does not return the right CORS headers, it will be droped and an exception will be shown in your browser console stating there is a CORS error.
the server of angular work on port 8060 .. and the server of service work on port 8090.. what should i do now ??
change @CrossOrigin(origins = "http://localhost:8090") to @CrossOrigin(origins = "http://localhost:8060") and make sure you have no errors in your browser console. If you do, please add them to your question.
I change It But still same problem
It seems like a CORS problem, please add the error from your browser console if there is any.
|
1

it should be like this. you forgot add @ResponseBody annotation for your method

@CrossOrigin(origins = "http://localhost:8090")
@GetMapping("/calc/{number1}/{number2}")
@ResponseBody
 public Calculator calc(@PathVariable("number1") int number1, 
        @PathVariable("number2") int number2){
    Calculator c = new Calculator(number1 , number2) ;
 return c;
}
}
Improve this answer

7 Comments

compiler tell me .. The annotation @RequestBody is disallowed for this location
sorry. i fixed it. @ResponseBody
this does not fix problem .. still object is empty
as @Tom said you should change to this @CrossOrigin(origins = "http://localhost:8060") too
I change It But still same problem
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.