React Fetch POST请求报404错误，寻求问题排查方案

核心404问题的可能原因 #

• 路由未正确导入：检查index.js中是否添加了userRouter的导入语句，比如const userRouter = require('./routes/user')（路径根据你的实际文件结构调整）。如果没有导入，服务器不会注册该路由，自然返回404。
• 路由文件未被加载：确认路由文件是否被正确引入到主文件中，比如是否在index.js里通过app.use挂载了userRouter，你当前的代码里有app.use("/api/user" , userRouter)，但要确保这个userRouter确实指向你的路由文件。

其他需修复的错误（非404但会导致功能失效） #

• 请求Content-Type不匹配：前端设置了multipart/form-data，但请求体是JSON字符串，这会导致服务器无法解析请求内容。应将Content-Type改为application/json，匹配服务器端的express.json()中间件。
• 响应解析写法错误：res.json是方法，需要调用才能解析JSON数据，应写成.then(res => res.json())，否则后续无法获取返回的响应数据。
• 服务器端冗余代码：res.send({input:search})之后的console.log("INPUT IS ",input)不会执行，因为res.send会结束响应流程，后续代码不会运行。

修复后的代码示例 #

前端sendData函数 #

function sendData (input){
    fetch('/api/user/userSearch',{
      method:'POST',
      headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({username: input})
    })
    .then(res => res.json())
    .then(data =>{
      let searchResult = data.input
      console.log("搜索结果:", searchResult)
    })
    .catch(err => console.error("请求出错:", err))
}

确认服务器端路由导入 #

在index.js中确保路由文件被正确导入：

const express = require('express');
const app = express();
const userRouter = require('./routes/user'); // 路径需匹配你的路由文件位置

app.use(express.json());
app.use(express.urlencoded({ extended: true}));

app.use("/api/user" , userRouter);

app.listen(3000, () => console.log("服务器运行在3000端口"));

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