更新用户时报错Cannot POST /update-user，附相关代码求问题排查

首先报错Cannot POST /update-user的核心原因是：更新表单的默认提交行为没有被成功阻止，浏览器按照form标签默认配置发送了POST请求到/update-user路径，但你的路由配置中仅定义了GET /update-user的页面渲染路由，没有对应处理POST请求的接口，因此抛出404错误。

问题排查点 #

• 检查更新表单的DOM元素ID是否为update-user，是否存在拼写错误、大小写不匹配、ID重复的问题
• 检查你的JS事件绑定代码是否在DOM元素渲染完成前执行，导致绑定失效：你当前的JS代码没有包裹在DOM就绪回调中，如果JS代码放在页面头部加载，会找不到还没渲染的表单元素，事件绑定自然不生效
• 检查form标签是否配置了action="/update-user" method="POST"，如果事件阻止失效就会触发默认提交

修复方案 #

1. 将所有DOM事件绑定代码包裹在jQuery的DOM就绪回调中，确保元素加载完成后再绑定事件：

// 新增DOM就绪回调包裹
$(function() {
  $('#add_user').submit(function(event){
    alert("Informacija išsaugota!")
  })

  $('#update-user').submit(function(event){
    event.preventDefault();
    let unindexed_array =$(this).serializeArray();
    let data = {}
    $.map(unindexed_array,function(n,i){
      data[n['name']]= n['value']
    })
    console.log(data)
    let request = {
      "url" : `http://localhost:3000/api/users/${data.id}`,
      "method" : "PUT",
      "data" : data
    }
    $.ajax(request).done(function(response){
      alert("Naudotojas Atnaujintas!")
    })
  })

  if(window.location.pathname == "/"){
    $ondelete=$(".table tbody td a.delete");
    $ondelete.click(function(){
      let id = $(this).attr("data-id")
      let request = {
        "url" : `http://localhost:3000/api/users/${id}`,
        "method" : "DELETE",
      }
      if(confirm("Ar tikrai norite ištrinti įraša?")){
        $.ajax(request).done(function(response){
          alert("Naudotojas ištrintas!")
          location.reload()
        })
      }
    })
  }
})

2. 临时验证可以直接在form标签上添加onsubmit="return false"，强制阻止默认提交行为，确认是不是事件绑定的问题。

前后端交互日志打印方法 #

前端排查 #

• 打开浏览器F12开发者工具，切换到「网络」标签页，勾选「保留日志」选项，提交表单时可以查看所有请求的方法、路径、请求参数、响应结果
• 在submit事件回调第一行添加console.log('提交事件触发')，查看控制台是否有输出，即可确认事件绑定是否生效

后端排查 #

• 安装morgan日志中间件，自动打印所有请求的详情：
  1. 执行安装命令：npm i morgan
  2. 在express入口文件中配置：

  const morgan = require('morgan')
  // 放在所有路由定义之前
  app.use(morgan('combined')) // 输出完整的请求方法、路径、状态码、请求来源、耗时等信息
  

• 也可以手动添加全局中间件打印请求信息：

  // 放在所有路由定义之前
  app.use((req, res, next) => {
    console.log(`[请求信息] 方法：${req.method} 路径：${req.path} Query参数：`, req.query, 'Body参数：', req.body)
    next()
  })
  

  注意：要确保你已经配置了app.use(express.json())和app.use(express.urlencoded({extended:true}))解析请求体，否则req.body会是空值

内容的提问来源于stack exchange，提问作者Sidas Vidūnas