为何GET请求正常，POST请求访问localhost:5000/api却返回404错误？

核心原因 #

GET请求正常说明/api路径在后端已存在，但后端未配置该路径的POST请求处理逻辑，导致请求到达后无匹配路由，返回404。

排查步骤 #

• 检查后端路由配置：确认后端框架（如Express）中是否为/api添加了POST路由处理。例如Express中，GET路由是app.get('/api', handler)，必须对应添加app.post('/api', postHandler)才能处理POST请求。
• 核对请求路径：确保前端POST的URL和后端配置完全一致，注意是否有斜杠差异（比如/api vs /api/）、大小写问题。
• 查看后端日志：启动后端时开启请求日志，验证POST请求是否真的到达后端，排查是否有中间件（如CORS、路由前缀）拦截了请求。

用户提供的前端代码 #

const createPost = async () => {
    let res = await axios.post("http://localhost:5000/api", {"id" : 4, "name" : "this was posted by code :)"})
    console.log(res)
  }

  useEffect(() => {
    axios.get("http://localhost:5000/api").then(res => {
      setBackendData(res.data)
    }).catch(err => {
      console.log(err)
    })
  }, [])

后端修复示例（Express） #

如果后端使用Express，需补充POST路由处理：

const express = require('express');
const app = express();
app.use(express.json()); // 解析JSON请求体

// 已有的GET路由
app.get('/api', (req, res) => {
  res.send('GET请求成功');
});

// 新增POST路由处理
app.post('/api', (req, res) => {
  const { id, name } = req.body;
  // 此处添加业务逻辑：比如存入数据库
  res.status(201).json({ message: '数据提交成功', data: req.body });
});

app.listen(5000, () => console.log('服务运行在5000端口'));

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