30/09/2018, 20:23

Lỗi POST request trong AngularJS

Mình làm 1 trang login trong angularJS, khi bấm nút Login thì dữ liệu sẽ được đẩy về Restful web service kiểm tra. Nếu account tồn tại thì trả về “Success”, “Failed” nếu thất bại.

Đây là web service:

@POST
@Path(value = "login")
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
@Produces(MediaType.TEXT_HTML)
public String login(@FormParam("email")String email, @FormParam("pass") String pass){
    UserModel um = new UserModel();
    Nguoichoi nc = um.find(email.trim(), pass.trim());
    if (nc != null){
        return "Success";
    } else { 
        return "Failed";
    }
}

AngularJS function:

app.controller("LoginController", function($scope,$http) {
    $scope.login = function(){
        var encodeString = "email=" + this.email + "&pass=" + this.pass;
        $http({
            method: "POST",
            url: "http://localhost:8080/HocvuiWebservices/rest/user/login",
            data: encodeString,
            headers: {'Accept':' text/plain', 'Content-Type': "application/x-www-form-urlencoded"}
        }).success(function(data, status, headers, config){
            console.log(data);
        }).error(function(data, status, headers, config){
            console.log(data);
            console.log(status);
            console.log(headers);
            console.log(config);
            console.log("Error submit form");
        });
    }
});

form login:

<form class="login-form" ng-submit="login()">
    <div class="form-group">
        <label for="exampleInputEmail1">Email: </label>
        <input type="email" class="form-control" ng-model="email" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password: </label>
        <input type="password" class="form-control" ng-model="pass" placeholder="Password">
    </div>
    <div class="form-group">
        <div class="checkbox">
            <label>
                <input type="checkbox"> Remember me
            </label>
        </div>
        <button type="submit" class="btn btn-primary">Loginp</button>
        &nbsp;&nbsp;&nbsp;<a ui-sref="dangky" class="text-primary">Register</a>
</form>

Khi bấm nút Login, mình kiểm tra thì đã gọi được đến web service và không có lỗi gì ở đầu server, tuy nhiên ở client thì angular rơi vào nhánh error sau khi thực hiện post request.

Ở nhánh error mình có console.log để xem như nào thì kết quả như sau:

data = null
status = -1
config = Object { method: "POST", transformRequest: Array[1], transformResponse: Array[1], paramSerializer: jf/this.$get/<(), url: "http://localhost:8080/HocvuiWebserv…", data: "email=abc@gmail.com&pass=123456", headers: Object }

Bạn nào có thể chỉ giúp mình lỗi ở đâu không?

Nguyễn Văn Cờ Đỏ viết 22:34 ngày 30/09/2018

data: encodeString nên thay bằng

params: {
    email : "your email",
    pass : "your password"
}
Davit lượt viết 22:27 ngày 30/09/2018

Mình xem trong console -> log -> sercurity có cái này, ko biết có phải do nó không?

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/HocvuiWebservices/rest/user/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Nguyễn Văn Cờ Đỏ viết 22:34 ngày 30/09/2018

cái lỗi này này thuộc về cross-domain, bạn dùng kiểu params như trên là đc

Bài liên quan
0