POST 400 bad request

1

i am trying to combine a cordova application with angularjs and ionic framework with a rest service for user login and register.

this is the code of data.js which connects to the rest api

 app.factory("Data", ['$http', 'toaster',
function ($http, toaster) { // This service connects to our REST API

var serviceBase = 'http://blace.co/task_manager/v1/';
var obj = {};
obj.toast = function (data) {
    toaster.pop(data.status, "", data.message, 10000, 'trustedHtml');
}
obj.get = function (q) {
    return $http.get(serviceBase + q).then(function (results) {
        return results.data;
    });
};
obj.post = function (q, object) {
     console.log(object);
return $http.post(serviceBase + q, object).then(function (results) {
return results.data;
});
};
obj.put = function (q, object) {
    return $http.put(serviceBase + q, object).then(function (results) {
        return results.data;
    });
};
obj.delete = function (q) {
    return $http.delete(serviceBase + q).then(function (results) {
        return results.data;
    });
};

return obj;
}]);

and this is the code of my controller authCtrl.js

app.controller('authCtrl', function ($scope, $rootScope, $routeParams, $location, $http, Data) {
//initially set those objects to null to avoid undefined error
$scope.login = {};
$scope.register = {};
$scope.doLogin = function (login) {
Data.post('login').then(function (results) {
    Data.toast(results);
    if (results.status == "success") {
        $location.path('dashboard');
    }
});
};
$scope.register = {};
$scope.Register = function (register) {
    Data.post('register').then(function (results) {
    Data.toast(results);
    if (results.status == "success") {
        $location.path('dashboard');
    }
 });
};
$scope.logout = function () {
Data.get('logout').then(function (results) {
    Data.toast(results);
    $location.path('login');
});
}
});

this one is the code of my rest api for the register part which is build with the slim framework and libraries

    // check for required params
    verifyRequiredParams(array('name', 'email', 'password'));

    $response = array();

    // reading post params
    $name = $app->request->post('name');
    $email = $app->request->post('email');
    $password = $app->request->post('password');

    // validating email address
    validateEmail($email);

    $db = new DbHandler();
    $res = $db->createUser($name, $email, $password);

    if ($res == USER_CREATED_SUCCESSFULLY) {
        $response["error"] = false;
        $response["message"] = "You are successfully registered";
    } else if ($res == USER_CREATE_FAILED) {
        $response["error"] = true;
        $response["message"] = "Oops! An error occurred while registereing";
    } else if ($res == USER_ALREADY_EXISTED) {
        $response["error"] = true;
        $response["message"] = "Sorry, this email already existed";
    }
    // echo json response
    echoRespnse(201, $response);
   });

the rest api is working perfectly and i have checked it with Advanced Rest Client

you can see it here

image
Screenshot_1.png1902×959 64.4 KB

in internet explorer i have this error BAD REQUEST - The request could not be processed by the server due to invalid syntax. (XHR): POST

i think the problem is that

By default, the $http service will transform the outgoing request by serializing the data as JSON and then posting it with the content- type, “application/json”. When we want to post the value as a FORM post, we need to change the serialization algorithm and post the data with the content-type, “application/x-www-form-urlencoded”.

another post

but i do not know how to implement this

any idea is appreciated! thank you

2

Here is an example

            var data = 'j_username=' + encodeURIComponent(credentials.username) +
                '&j_password=' + encodeURIComponent(credentials.password) +
                '&remember-me=' + credentials.rememberMe + '&submit=Login';
            return $http.post('api/authentication', data, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).success(function (response) {
                return response;
            });
3

hallo @gmarziou

thank you for the response!

where am i supposed to add this?

4

Hi,

If you come from JQuery, this guide will help you : http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

5

This is an example of calling a login API using $http.post with x-www-form-urlencoded, it should be obvious to adapt to your app.

6

@gmarziou @abellion

thank you for your interest. please consider that this is the first time i try to make an app and i lack from knowledge and experience. the code i provide you is from tutorials. that`s why i do not know how to implement your advises.

i read a lot of day to cover the lack. please understand me :slight_smile:

thank you