邮箱存在性校验GET接口返回404问题排查及代码优化求助

404报错根因 #

• 路由拼写不匹配：后端路由配置为api/Employee/EmailALreadyExist（注意单词里的L是大写），前端请求的路径是api/Employee/EmailAlreadyExist（单词里的L是小写），路由匹配失败。
• GET请求传参格式错误：GET请求的参数需要是键=值的Query格式，你前端用JSON.stringify(email)序列化纯字符串后传递，导致最终请求参数变成无键的"some@abc.com"，框架无法匹配到接收email参数的接口，也会触发404。
• 多余配置冲突：GET请求不需要配置contentType: "application/json"，该配置仅用于带请求体的POST/PUT请求，多余配置会干扰框架对请求的解析。

修复步骤 #

1. 前端校验接口修改 #

修正传参格式、删除多余配置，同时修正你原来写反的校验逻辑（后端返回true代表邮箱已存在）：

function CheckAvailability(callback) {
    var email = $("#officialemail").val();
    // 先做非空和格式校验，减少无效请求
    if(!email || !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) {
        $("#message").html("请输入合法的邮箱地址").css("color", "orange");
        callback?.(false);
        return;
    }
    $.ajax({
        type: "GET",
        url: 'http://localhost:1089/api/Employee/EmailAlreadyExist',
        dataType: 'json',
        // 传递键值对格式的参数
        data: {email: email},
        success: function (response) {
            var message = $("#message");
            if (!response) {
                message.css("color", "green");
                message.html("邮箱可用");
                callback?.(true);
            }
            else {
                message.css("color", "red");
                message.html("邮箱已被注册，请更换");
                callback?.(false);
            }
        },
        error: function() {
            $("#message").html("邮箱校验失败，请稍后重试").css("color", "orange");
            callback?.(false);
        }
    });
}

2. 提交逻辑修改 #

CheckAvailability是异步请求，需要等校验结果返回后再判断是否提交：

$('.empOfficialDetails').click(function (ev) {
    ev.preventDefault();
    // 校验通过后再执行提交逻辑
    CheckAvailability(function(isValid) {
        if(!isValid) return;
        // 原有提交代码保持不变即可
        var data = new Object();
        // ... 原有赋值逻辑不变
    })
});

3. 后端接口修改 #

修正路由拼写、删除多余错误代码、添加资源释放避免连接泄漏：

// 修正路由拼写和前端保持一致
[Route("api/Employee/EmailAlreadyExist")]
[HttpGet]
// 可添加[FromQuery]明确参数来源，避免框架解析异常
public bool EmailAlreadyExist([FromQuery] string email)
{
    if(string.IsNullOrWhiteSpace(email)) return false;
    // using会自动释放数据库连接，避免连接泄漏
    using(var con = DB.getDatabaseConnection())
    {
        // 直接返回布尔值，无需多余判断
        string query = "SELECT CASE WHEN EXISTS (SELECT 1 FROM Employee WHERE OfficialEmailAddress = @OfficialEmailAddress) THEN CAST(1 AS BIT) ELSE CAST(0 AS BIT) END";
        using(SqlCommand com = new SqlCommand(query, con))
        {
            com.Parameters.AddWithValue("@OfficialEmailAddress", email.Trim());
            con.Open();
            return (bool)com.ExecuteScalar();
        }
    }
}

其他优化建议 #

• 前端：给邮箱输入框添加失焦事件实时触发校验，不要仅在提交时才校验，提升用户体验；不要明文传输密码，前端加密后再传递给后端。
• 后端：所有数据库操作对象（连接、命令、阅读器）都用using包裹自动释放；不要明文存储密码，后端存入数据库前要做哈希加密；接口添加身份校验，避免被恶意遍历枚举已注册的邮箱。
• 逻辑：提交表单时可以加防抖，避免用户重复点击触发多次提交。

内容的提问来源于stack exchange，提问作者Syed Muhammad Aousaja Ali