POST w/ Params returns 400 Error

Question

Trying to send a post response to this method in spring mvc:

@RestController
public class LoginRController {

    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public String login_Post(@RequestParam(value = "user", required = true) String username,   @RequestParam(value = "pass", required = true) String password) {
        return ("Login: "+username+", "+password);
    }
}

So I initally tried:

Controller

App.controller('LoginController', [
        '$scope',
        'LoginService',
        function($scope, LoginService) {
            var self = this;

            self.authUser = function() {
                LoginService.authUser($('#inputEmail').val(),
                        $('#inputPassword').val()).then(function(d) {
                    console.log("This happened");
                }, function(errResponse) {
                    console.error('Error while fetching Currencies');
                });
            };
        } ]);

Service

App.factory('LoginService', [
        '$http',
        '$q',
        function($http, $q) {

            return {

                authUser : function(username, password) {
                    return $http.post(
                            'login',
                            "user=" + encodeURIComponent(username) + "&pass="
                                    + encodeURIComponent(password)).then(
                            function(response) {
                                return response.data;
                            }, function(errResponse) {
                        console.error('Error @ authUser');
                        return $q.reject(errResponse);
                    })
                }
            }
        } ]);

I found that it always returns a 400 Error which means the required fields dont match up... Which is odd because I can use Jquery $post() just fine.

Also I tried everything here on this thread, AngularJs $http.post() does not send data and How do I POST urlencoded form data with $http in AngularJS?

Also tried:

'use strict';

App.factory('LoginService', [ '$http', '$q', function($http, $q) {

    return {

        authUser : function(username, password) {
            return $http.post('login', {
                params : {
                    user : username,
                    pass : password
                }
            }, {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function(response) {
                return response.data;
            }, function(errResponse) {
                console.error('Error @ authUser');
                return $q.reject(errResponse);
            })
        }
    }
} ]);

You have plenty of problems in code, because you have lack of knowlege regarding two way binding in angular apps (you shouldn't use constricts similar `to $('#inputPassword').val()`. — rzelek, Dec 22 '15 at 21:08

score 1 · Accepted Answer · edited May 23 '17 at 12:02

Using your last example as a baseline, you need to: 1) drop params and 2) urlencode the data (here with jQuery $.param()):

return {
    authUser: function(username, password) {
        return $http.post('login',  $.param({
            user: username,
            pass: password
        }), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(response) {
            return response.data;
        }, function(errResponse) {
           console.error('Error @ authUser');
           return $q.reject(errResponse);
        })
    }
}

It is all explained here.

POST w/ Params returns 400 Error

1 Answers1