React环境下使用Express与Axios发送PUT请求返回404错误排查

问题排查&解决方案 #

• 1. 检查后端路由挂载路径
     确认你在Express入口文件（一般为app.js/index.js）中有没有正确挂载路由模块，示例挂载代码如下：

  const articleRouter = require('./你的路由文件相对路径')
  // 如果你是带前缀的挂载方式，如下所示
  app.use('/article', articleRouter)
  // 那么前端请求地址应该是 http://localhost:3000/article/update/[id]，而非直接访问/update/[id]
  

  未正确挂载路由的话，后端不会识别你定义的/update/:id规则，自然返回404。

• 2. 检查后端服务端口是否匹配
     确认你的Express服务实际运行端口是否为3000，多数场景下React本地开发服务默认占用3000端口，后端会被迫切换到其他端口（比如3001），如果后端端口修改，前端Axios的请求地址也要对应修改端口。
• 3. 处理OPTIONS预检请求
     PUT属于非简单请求，Axios会先发送OPTIONS请求做跨域预检，如果你后端没有配置OPTIONS请求的响应规则，或者cors中间件没有允许PUT方法，就会返回404。可以直接引入cors中间件统一处理：
     先执行安装命令：npm install cors
     然后在Express入口文件中添加配置：

  const cors = require('cors')
  app.use(cors({
    methods: ['GET', 'POST', 'PUT', 'DELETE'] // 明确允许PUT方法
  }))
  

• 4. 调整路由匹配顺序
     Express会按照路由定义的先后顺序匹配请求，如果你在/update/:id之前定义了通配符路由（比如app.get('*', ...)），会优先匹配通配路由，导致PUT请求找不到对应规则，需要把精确路由放在通配路由之前定义。

附带其他代码问题修复（和404无关，但会导致功能异常） #

你的路由处理逻辑中存在两个错误需要修改：

1. findByIdAndUpdate的回调参数顺序错误，正确写法是(err, doc)，你写的(req,res,err)会覆盖外层的res对象，无法给前端返回响应
2. 路由处理完成后没有给前端返回响应，会导致请求超时
   修改后的路由代码：

router.route("/update/:id").put((req,res) => {
  const Article = {
    title:req.body.title,
    content:req.body.content
  }
  console.log(Article);
  newArticle.findByIdAndUpdate({_id:req.params.id},{$set:Article},(err, doc) => {
    if(err) {
      console.log("error", err)
      return res.status(500).json({msg: '更新失败', error: err})
    }
    console.log("Article updated")
    res.json({msg: '更新成功', data: doc})
  })
})

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