Express后端POST请求/api/data接口返回404错误求助

问题现象 #

同路径/api/data的GET请求可以正常响应，发起POST请求时接口返回404错误：

POST http://localhost:5000/api/data 404 (Not Found)

现有实现代码 #

前端代码 #

useEffect(() => {
    fetch('http://localhost:5000/api/data')
    .then(res => { return res.json() })
    .then((data) => {
      setData(data)
      setDatarecieved(true)
    })
  }, [])


  const clickHandler = () => {
    fetch('http://localhost:5000/api/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          "id": 5,
          "name":"test"
        })
      })
    }

后端代码 #

const express=require('express');
const app=express();
const data = require('./data.json');

const cors=require("cors");
const corsOptions ={
   origin:'*',
   credentials:true,
   optionSuccessStatus:200,
}

app.use(cors(corsOptions)) 

app.get('/',(req,res)=>{
    res.send('Hello World');
});

app.get('/api/data',(req,res)=>{
    res.send(data);
});

app.get('/api/data/:id',(req,res)=>{
    const x=data[req.params.id];
    res.send(data);
});

app.listen(5000,()=>{
    console.log('Server is running on port 5000');
});

问题根因 #

后端服务仅注册了/api/data路径的GET方法路由，没有定义该路径的POST请求处理逻辑，请求到达服务端后找不到匹配的路由规则，因此返回404。
另外当前后端缺少JSON请求体解析中间件，即使补上POST路由，也无法正常读取前端传递的JSON格式请求参数。

修复方案 #

• 在cors配置之后添加Express内置的JSON解析中间件，用于解析请求体中的JSON数据：

// 加在app.use(cors(corsOptions)) 后面即可
app.use(express.json())

• 补充/api/data路径的POST路由处理逻辑，示例如下：

// 放在现有GET /api/data路由附近即可
app.post('/api/data',(req,res)=>{
    // req.body就是前端POST传过来的{id:5, name:"test"}数据
    const newItem = req.body
    data.push(newItem)
    // 按业务需求返回响应即可
    res.send({
      code: 200,
      msg: '添加成功',
      data: newItem
    })
});

• 保存后端代码后重启Node服务，再发起POST请求即可正常响应。

补充说明：现有代码中app.get('/api/data/:id')路由仅匹配GET方法的带id参数的请求，不会处理POST类型的同路径请求。

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