使用Axios更新CRUD博客应用时遇404错误，求排查方案

问题描述 #

开发博客CRUD应用时，已实现博客创建、按ID获取单篇博客功能，但更新博客时持续收到404“未找到”错误，切换Fetch API和Axios后问题依旧。

前端提交代码 #

const handleFormSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.put(
        `http://localhost:4000/api/blog/${id}`,
        blog
      );
      if (response.status === 200) {
        alert("Blog updated successfully!");
      } else {
        alert("Something went wrong");
      }
    } catch (error) {
      console.error(error);
      alert("Internal Server Error");
    }
};

后端路由代码 #

import express from "express";
import {
  getAllBlogs,
  getBlogById,
  createBlog,
  updateBlog,
  deleteBlog,
} from "../controllers/blogController.js";

const router = express.Router();

router.post("/", createBlog); // Create a new blog
router.get("/", getAllBlogs); // Get all blogs
router.get("/:id", getBlogById); // Get a single blog by ID
router.put("/:id", updateBlog); // Update a blog by ID
router.delete("/:id", deleteBlog); // Delete a blog by ID

export default router;

排查与解决步骤 #

• 核对请求URL有效性

  1. 检查id变量是否有合法值：在请求前添加console.log('请求URL:', http://localhost:4000/api/blog/${id})，确认URL中的ID不是undefined、空值或非法格式。比如如果是从路由参数获取ID，要确保参数正确传递（React中可通过useParams()获取，Vue中用$route.params.id）。
  2. 确认后端路由挂载前缀：检查主应用中是否将博客路由挂载在/api/blog下，比如app.use('/api/blog', blogRouter)。如果挂载路径是/api/blogs（复数），前端URL也需要对应修改。

• 检查后端路由匹配逻辑
  确保router.put("/:id", updateBlog)没有被其他优先级更高的路由拦截。比如如果有router.get("/*", ...)这类通配路由放在PUT路由前面，会优先匹配导致404。当前给出的路由顺序是合理的，但要排查实际代码中是否存在其他干扰路由。

• 验证控制器的正确性

  1. 检查blogController.js中的updateBlog函数是否正确定义并导出，避免拼写错误（比如写成updateBlogs）。
  2. 在updateBlog函数开头添加console.log('更新路由已命中')，如果控制台没有输出，说明请求根本没到达控制器，问题出在路由匹配环节。

• 排查跨域与请求方法问题

  1. 打开浏览器开发者工具的Network标签，查看请求的详细信息：确认请求方法是PUT，状态码是否为真实的404，还是CORS错误导致的伪装状态。
  2. 如果存在跨域问题，后端需配置CORS中间件（比如cors()），并确保允许PUT方法。

• 直接测试接口
  用Postman或curl直接发送PUT请求到http://localhost:4000/api/blog/[合法博客ID]：

  • 如果直接调用也返回404，说明问题在后端路由或控制器；
  • 如果直接调用成功，说明前端的id变量或请求数据存在问题。

常见修复示例 #

如果前端id未正确获取，以React为例，确保从路由参数中拿到有效ID：

import { useParams } from 'react-router-dom';

const EditBlogPage = () => {
  const { id } = useParams(); // 从URL参数获取博客ID
  // ...其他逻辑
};

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