Http POST 405 errror in Angularjs with Spring MVC - angularjs

Question

Actually I want to integrate Spring with Angularjs and i am beginner in Angularjs. When i use $http post method it return POST 405.Here is my code
SignUp.html
<form method="post" ng-submit="saveUser()">
<input type="hidden" name="${_csrf.parameterName}"
value="${_csrf.token}" />
</form>
myApp.js
var myApp = angular.module('myApp', ['ngMessages']);
UserIdController.js
myApp.controller('UserIdController', [
'$scope',
'UserIdService',
function($scope, UserIdService) {
$scope.saveUser = function() {
UserIdService.saveUser($scope.user).then(
function success(response) {
console.log("user Added");
}, function error(response) {
console.log("User not Added")
});
}
} ]);
UserIdService.js
myApp
.service(
'UserIdService',
[
'$http',
function($http) {
this.saveUser = function saveUser(user) {
return $http({
method : 'post',
url : 'SignUpUser',
data : {
firstName : user.firstName
},
headers : 'Content-Type: application/json'
});
}
} ]);
Spring REST Controller
#RestController
#Produces("text/plain")
public class SignUpController {
private static final Logger logger =
LogManager.getLogger(SignUpController.class);
#RequestMapping(value = "/SignUpUser", method =
RequestMethod.POST, headers = "Accept=application/json")
public String saveUser(#PathVariable String firstname) throws
ParseException {
logger.debug("Enter in SignUp Controller in Post Method");
UserDetails userDetails = new UserDetails();
studentDetails.setFirstName(firstname);
return "ok";
}
I got this error in Chrome in Inspect element
Request URL:http://localhost:8080/examapp/signup
Request Method:POST
Status Code:405
Remote Address:[::1]:8080
Referrer Policy:no-referrer-when-downgrade
Response Headers
view parsed
HTTP/1.1 405
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-XSS-Protection: 1; mode=block
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Allow: GET
Content-Type: text/html;charset=ISO-8859-1
Content-Language: en
Content-Length: 1084
Date: Fri, 04 Aug 2017 05:50:32 GMT
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:26
Content-Type:application/json
Cookie:JSESSIONID=ACF3E30CB7B3A6A9862F923F42DB61B5
Host:localhost:8080
Origin:http://localhost:8080
Referer:http://localhost:8080/examapp/signup.html
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36
Request Payload
Does anyone have an idea of what I'm doing wrong? It seems like a pretty straight forward implementation that is working on all of the tutorials I've seen yet. Any help will be appreciated. Thank you.

Answer 1

Please add #RequestMapping("/examapp") over yourSignUpController
#RestController
#Produces("text/plain")
#RequestMapping("/examapp")
public class SignUpController {

Answer 2

You have specified #PathVariable here. A path variable is just that, a variable from the path. What you want is #RequestBody.
In your scenario, Spring has nothing maped to /SignUpUser, it is looking for /SignUpUser/{firstName}, but since #RequestMapping doesn't specify {firstName}, you are essentially posting to a non-existent resource.
Although unrealistic in the real world, to post just a first name to login, In your $http.post, you would just want data : user.firstName.
In your Spring controller:
#RequestMapping(value = "/SignUpUser", method =
RequestMethod.POST, headers = "Accept=application/json")
public String saveUser(#RequestBody String firstname)
The Right Fix
If you want your back-end to accept what you have in Angular (more real-world), you would create a POJO class, and accept that (#RequestBody UserDetails request). It appears you have the UserDetails POJO created, so you just have to accept that instead:
#RequestMapping(value = "/SignUpUser", method =
RequestMethod.POST, headers = "Accept=application/json")
public String saveUser(#RequestBody UserDetails userDetails ) {