Express.js PUT更新路由失效问题排查求助

核心问题1：window.open 发起的是GET请求，完全绕过表单提交逻辑 #

你的按钮绑定了update()函数，里面用window.open打开目标URL，这本质是发起GET请求，直接跳过了表单的POST提交流程——这就是为什么会出现Cannot GET /api/update/contacts/1的原因：浏览器确实在发GET请求，但你只实现了PUT路由。而且这个操作还会直接关闭当前窗口，表单里的修改数据根本没机会传到后端。

修复：删掉onclick事件和update()函数，让按钮正常触发表单提交。

核心问题2：Express路由路径缺少开头的斜杠 #

你的PUT路由写的是：

app.put("api/update/contacts/:studentID", ...)

正确的路径必须以/开头，否则Express会把它当作相对路径，导致路由无法匹配：

app.put("/api/update/contacts/:studentID", ...)

核心问题3：HTML表单不原生支持PUT请求，需处理方法转换 #

HTML表单仅支持GET和POST两种方法，要发起PUT请求，有两种可行方案：

方案A：配置method-override中间件（补全你没做好的配置） #

1. 确保已安装并正确配置中间件：

// start.js 顶部
const methodOverride = require('method-override');
app.use(methodOverride('_method'));

2. 修改HTML表单，添加隐藏字段指定真实请求方法，同时补充action属性：

<form method="POST" id="myForm" action="/api/update/contacts/{{替换为实际studentID}}">
  <!-- 这里放你的vorname、nachname、mail输入字段 -->
  <input type="hidden" name="_method" value="PUT">
  <button type="submit" id="aktualisierenButton">Aktualisieren</button>
</form>

注意把{{替换为实际studentID}}换成从localStorage读取的真实ID，比如可以用JS动态设置：

document.getElementById('myForm').action = `/api/update/contacts/${localStorage.getItem('paraID')}`;

方案B：用AJAX直接发起PUT请求（更灵活） #

保留表单，但阻止默认提交行为，用fetch发送PUT请求：

<form id="myForm">
  <!-- 这里放你的vorname、nachname、mail输入字段 -->
  <button type="submit" id="aktualisierenButton">Aktualisieren</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止默认表单提交
  const studentID = localStorage.getItem('paraID');
  const formData = new FormData(e.target);
  const contact = Object.fromEntries(formData);

  try {
    const response = await fetch(`/api/update/contacts/${studentID}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(contact),
    });
    if (response.ok) {
      alert('更新成功');
      window.close();
    } else {
      const error = await response.json();
      alert(error.error);
    }
  } catch (err) {
    console.error('更新失败:', err);
    alert('更新出错，请重试');
  }
});
</script>

这种方式不需要依赖method-override，直接通过JS控制请求方法和数据。

额外检查点 #

• 确保Express应用配置了解析请求体的中间件：

// 解析表单数据
app.use(express.urlencoded({ extended: true }));
// 解析JSON数据（用AJAX方案时必须配置）
app.use(express.json());

• 验证contactsManager.getContact方法是否能正确根据studentID查询到数据，避免因查询失败返回400错误。

内容的提问来源于stack exchange，提问作者M. B.