Spring Boot项目中AJAX登录校验返回500服务器错误如何解决？

问题根因 #

• 前端AJAX配置存在冲突：你手动设置了contentType: "application/json; charset=utf-8"，但实际传递的是普通键值对格式参数，没有转为JSON字符串。Spring MVC会按照JSON格式解析请求体，此时通过request.getParameter()无法获取到对应参数，拿到的是null值，后续调用业务校验方法时大概率触发空指针异常，最终返回500错误。
• 未指定AJAX请求类型：默认发起的是GET请求，登录场景用POST更符合规范。

解决方案 #

二选一即可：

方案1：适配现有Controller逻辑，仅修改前端代码 #

删除AJAX配置中的contentType字段，使用默认的表单参数格式传递数据，同时指定请求类型为POST：

$(document).ready(function() {
    $("#submit-btn").on("click", function(){
        var username = $("#username").val();
        var password = $("#password").val();
        console.log(username+" = "+password);
        $.ajax({
            url: "/LoginChecker",
            type: "POST", // 新增指定POST请求
            // 删除原有contentType配置
            data: {
                username:username,
                password:password
            },
            dataType : "text",
            success: function(result){
                if(result=="true"){
                    $("#error-message").css("display","none");
                    $("#form").submit();
                }
                else{
                    $("#error-message").css("display","block");
                }
            },
            error: function(e){
                alert(e);
            }
        
        });
    });
});

该方案无需修改后端Controller代码，request.getParameter()可正常读取表单格式的参数。

方案2：前后端统一用JSON格式交互 #

第一步：修改前端代码

将传递的参数转为JSON字符串，保留contentType配置：

$(document).ready(function() {
    $("#submit-btn").on("click", function(){
        var username = $("#username").val();
        var password = $("#password").val();
        console.log(username+" = "+password);
        $.ajax({
            url: "/LoginChecker",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ // 把参数转成JSON字符串
                username:username,
                password:password
            }),
            dataType : "text",
            success: function(result){
                if(result=="true"){
                    $("#error-message").css("display","none");
                    $("#form").submit();
                }
                else{
                    $("#error-message").css("display","block");
                }
            },
            error: function(e){
                alert(e);
            }
        
        });
    });
});

第二步：修改后端接收逻辑

首先新增登录参数接收DTO类：

// 新增LoginDTO.java
public class LoginDTO {
    private String username;
    private String password;

    // 补全getter、setter方法
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
}

调整Controller代码，用@RequestBody注解接收JSON参数：

@RequestMapping(value = "/LoginChecker", method = RequestMethod.POST)
@ResponseBody
public String loginChecker(@RequestBody LoginDTO loginDTO) {
    String username = loginDTO.getUsername();
    String password = loginDTO.getPassword();
    System.out.println(username+" = "+password);
    if(AjaxDemoService.loginValidator(username, password)) {
        return "true";
    }
    return "false";
}

排查建议 #

后续遇到500服务器错误，优先查看后端IDE控制台的异常栈日志，可直接定位到具体报错的代码行，大幅提升排查效率。

内容的提问来源于stack exchange，提问作者Karan_raj