React前端请求Express后端登录接口时出现404错误排查

404错误说明前端请求的/login接口在后端不存在，结合你的代码和配置，从以下几个方向排查：

1. 后端路由注册顺序错误 #

Express的路由匹配是按注册顺序执行的，如果你的/login路由是在全局404处理中间件之后注册的，请求会先被404中间件拦截，永远到不了/login接口。

• 检查后端入口文件（比如app.js），确保app.post("/login", ...)的代码在所有app.use((req, res) => res.sendStatus(404))这类全局错误处理中间件之前。

2. 后端未挂载路由模块（若路由拆分到单独文件） #

如果/login路由写在单独的路由文件（比如routes/login.js）里，要确认主文件是否用app.use()挂载了该路由：

// 示例：路由文件在routes/login.js时的挂载代码
const loginRoutes = require('./routes/login');
app.use('/', loginRoutes); // 挂载路径为根目录时，/login路由才会生效

未挂载的话，后端根本识别不到该路由，直接返回404。

3. 前端请求的实际URL与后端路由不匹配 #

即便你确认API_BASE_URL正确，仍需验证实际请求路径：

• 在前端handleSubmit函数里添加console.log(${API_BASE_URL}/login)，查看控制台输出的请求路径；
• 打开浏览器开发者工具的网络面板，找到对应POST请求，检查完整URL是否和后端的/login完全一致（比如是否多了/api前缀、大小写是否统一等）。

4. 后端缺少解析JSON请求体的中间件 #

虽然这不会直接导致404，但后端未配置express.json()的话，前端发送的JSON数据无法被解析，可能引发后续逻辑错误，需确认在后端入口文件里添加：

app.use(express.json()); // 必须在所有路由注册之前添加

该中间件负责解析JSON格式的请求体，确保req.body能正确获取前端发送的user和pwd。

5. 后端服务器未正确加载路由 #

在后端/login路由函数开头添加console.log("Login接口被请求")，启动后端后发送登录请求，查看后端控制台是否有输出。如果没有，说明路由未被加载，检查后端入口文件是否正确导入了路由代码，或服务器是否真的启动成功。

6. 前后端同一端口的代理/静态文件托管问题 #

如果通过前端代理（比如React的package.json里的proxy配置）实现同一端口访问，确认proxy值是否指向后端实际运行地址（比如"proxy": "http://localhost:3001"，若后端原本运行在3001端口）；
如果是后端托管前端静态文件，要确保API路由在静态文件托管和SPA路由 fallback之前注册：

// 先注册所有API路由
app.post("/login", ...);
// 再托管前端静态文件
app.use(express.static(path.join(__dirname, 'build')));
// 处理SPA路由 fallback
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

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