汽车租赁Web应用预订删除功能故障排查求助

故障原因分析及解决方法 #

1. API路由挂载路径不匹配（触发404错误） #

前端发起的DELETE请求路径为http://localhost:9000/reservations/{id}，但如果你的Express主服务器文件（如server.js）挂载ReservationsRoute时添加了前缀（比如/api），实际有效接口路径会变成http://localhost:9000/api/reservations/{id}，前端请求路径与实际接口不匹配就会返回404。

解决方法：

• 检查主服务器的路由挂载代码，示例：

  // 主server.js中
  const reservationsRouter = require('./routes/ReservationsRoute');
  // 若带前缀挂载
  app.use('/api', reservationsRouter);
  

• 同步修改前端CancelReservation.js的请求路径：

  const response = await fetch(`http://localhost:9000/api/reservations/${reservationIdTrimmed}`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json"
    },
  });
  

• 若没有前缀，确保主服务器直接挂载：app.use('/', reservationsRouter)

2. 预订ID大小写不匹配（触发404错误） #

前端正则要求预订ID为大写字母开头（/^[A-Z]{1}\d{9}$/），但如果创建预订时存入数据库的ID是小写（比如用户输入小写字母、后端插入未做大小写统一），DELETE请求时会因查询不到对应记录返回404。

解决方法：

• 统一ID大小写：
  • 前端修改：在handleSubmit中把ID转为大写：

    const reservationIdTrimmed = reservationId.trim().toUpperCase();
    

  • 或后端SQL查询时忽略大小写（SQL Server环境）：

    const customerResult = await pool.query`SELECT Customer_ID FROM Reservation WHERE ID = ${reservationId} COLLATE SQL_Latin1_General_CP1_CI_AS`;
    

3. 客户表更新逻辑缺陷（触发500错误） #

DELETE路由中更新客户表Reservation_ID字段时，存在两个致命问题：

• 若customerResult2.recordset[0]不存在（客户ID无效），existingReservationID为undefined，执行split(',')会直接抛出错误，导致500。
• 若更新后的updatedReservationID为空字符串，而客户表Reservation_ID字段设置为NOT NULL，SQL UPDATE语句执行失败，返回500。

解决方法：

• 增加客户存在性检查：

  const customerResult2 = await pool.query`SELECT Reservation_ID FROM Customers WHERE ID = ${customerId}`;
  if (customerResult2.recordset.length === 0) {
      console.warn(`客户ID ${customerId}不存在，跳过Reservation_ID更新`);
      return res.status(200).json({ message: '预订已删除，但未找到对应客户记录' });
  }
  const existingReservationID = customerResult2.recordset[0].Reservation_ID;
  

• 处理空字符串情况（需确保字段允许NULL）：

  const updatedReservationID = existingReservationID
      ? existingReservationID.split(',').filter(id => id !== reservationId).join(',')
      : null; // 替换空字符串为null
  await pool.query`UPDATE Customers SET Reservation_ID = ${updatedReservationID} WHERE ID = ${customerId}`;
  

• 若客户表Reservation_ID字段不允许NULL，修改表结构：

  ALTER TABLE Customers ALTER COLUMN Reservation_ID VARCHAR(MAX) NULL;
  

4. CORS跨域拦截（可能触发请求失败） #

如果前端与后端端口不同（比如前端3000、后端9000），后端未配置CORS会导致浏览器拦截请求，表现为500或404（实际是跨域错误）。

解决方法：

• 安装并配置cors中间件：

  npm install cors
  

  // 主server.js中
  const cors = require('cors');
  app.use(cors());
  

5. 数据库权限或连接问题（触发500错误） #

如果后端数据库连接池pool配置错误，或数据库用户没有Reservation表的DELETE权限、Customers表的UPDATE权限，会导致SQL执行失败，返回500。

解决方法：

• 检查database/db.js中的连接字符串是否正确，确保能正常连接数据库。
• 验证数据库用户是否拥有对应表的操作权限。
• 查看后端控制台的详细错误日志（console.error('Error deleting Reservation:', error);），根据日志定位具体SQL错误。

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