ExpressJS登录接口未返回响应问题求助

多次实现过类似登录功能，这次遇到异常：前端通过fetch向Express服务器发送登录凭证，服务器能正常获取请求数据，但始终无法向页面返回响应。前端仅能看到发起的请求，收不到任何返回结果。

前端代码 #

async function request(url, data) {
  data = JSON.stringify(data);
  
  const response = await fetch(url, {
    method: "POST",
    cache: "no-cache",
    headers: {
      "Content-Type": "application/json",
    },
    body: data,
  });
  console.log('response', JSON.stringify(response));
  return response.json();
}
    
$("#log-form").submit(async () => {
  const data = {
    username: $('input[name=log-user]').val(),
    password: $('input[name=log-pass]').val()
  };
  
  const result = await request("/login", data);
  console.log("log-result", JSON.stringify(result));
  if (result.status == "ok") {
    alert("You have successfully logged in!");
  } else {
    alert(result.error);
  }
  //window.location.href = "/chat";
});

后端代码 #

app.use(express.json());
app.use(express.urlencoded({extended: true}));

app.post('/login', async (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  
  const errString = "Incorrect usernane/password combo.";
  
  let result = await query("SELECT * FROM User WHERE name = '"+username+"'");
  result = result[0];
  
  if (result.user_id) {
    const valid = await bcrypt.compare(password, result["password"]);
    console.log('validPass', valid);
    if (valid) {
      // login and set session
      data.status = "ok";
      data.data.user = result;
      
      //req.session.user = result;
    } else {
      // invalid password
      data.status = "error";
      data.error = errString;
    }
  } else {
    // invalid password
    data.status = "error";
    data.error = errString;
  }
  console.log('data', data);
  res.status(200).send(data);
});

异常现象 #

• Express服务器能正常读取req.body中的用户名和密码
• 后端控制台console.log('data', data)能打印出预期的结果
• 前端始终收不到响应，浏览器网络请求中仅能看到请求发起，无返回内容

1. 后端未初始化data变量 #

后端代码中直接对data.status、data.data.user赋值，但**data变量从未声明和初始化**。虽然控制台能打印data，大概率是意外的全局变量导致，但这种写法会触发未定义错误，中断响应流程，服务器无法正常发送响应。

修复方案：在login接口开头添加data的初始化代码：

app.post('/login', async (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 初始化data对象，包含data子对象避免后续赋值报错
  let data = {
    data: {}
  };
  const errString = "Incorrect usernane/password combo.";
  
  // 后续逻辑保持不变...
});

2. 前端未阻止表单默认提交行为 #

前端的表单提交回调中没有阻止浏览器的默认表单提交行为，浏览器会按照传统方式刷新页面，导致fetch请求的响应还没返回就被页面刷新中断，所以前端看不到响应结果。

修复方案：在submit回调中添加阻止默认行为的代码：

$("#log-form").submit(async (event) => {
  // 阻止表单默认提交，避免页面刷新
  event.preventDefault();
  
  const data = {
    username: $('input[name=log-user]').val(),
    password: $('input[name=log-pass]').val()
  };
  
  // 后续逻辑保持不变...
});

额外提醒：修复SQL注入风险 #

后端SQL查询直接拼接用户名："SELECT * FROM User WHERE name = '"+username+"'"，存在严重的SQL注入漏洞，建议改用参数化查询：

// 示例：使用参数化查询（适配你的数据库驱动）
let result = await query("SELECT * FROM User WHERE name = ?", [username]);

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