简单ReactJS表单提交到Express JS服务器持续返回404错误求助

问题排查与修复 #

核心错误原因 #

404报错的直接原因是服务端路由挂载路径和前端请求路径不匹配，同时还有3个关联错误需要同步修复：

• 路由挂载错误：你当前服务端将users路由挂载到了根路径/下，而前端请求的路径是/api/users，自然找不到对应接口
• 缺少JSON解析中间件：你提交的是JSON格式的请求体，但服务端只配置了urlencoded解析，无法识别JSON类型的请求
• 接口未返回响应：users接口的POST逻辑只做了控制台打印，没有给前端返回任何响应，就算路径匹配也会触发超时错误

具体修复步骤 #

1. 修改服务端入口JS代码

const express = require ('express')
const path = require('path');

const app = express()
// 新增JSON解析中间件
app.use(express.json())
app.use(express.urlencoded({extended: false})); 

// 把原来的app.use('/', ...)改成下面的，挂载到/api/users路径
app.use('/api/users', require('./routes/api/users'))

// Serve static assets in production
if (process.env.NODE_ENV === 'production'){
    app.use(express.static('client/build'))
    app.get('*', (req,res)=>{
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
    })
}

const PORT = 5000
app.listen(process.env.PORT || 5000, () => console.log(`服务运行在端口${PORT}`))

2. 修改routes/api/users.js代码，给接口增加返回值

const express = require('express')
const router = express.Router();

router.post('/', async (req,res)=>{
  console.log('its working, and here is the data', req.body)
  // 新增返回响应，可根据业务需求返回数据
  res.status(200).json({msg: '注册成功', data: req.body})
})

module.exports = router;

3. （可选优化）简化React端的axios请求逻辑，axios默认会自动序列化JS对象为JSON、自动添加Content-Type头，不需要手动处理

// 原来的onSubmit里的try块可以简化为：
try {
  const res = await axios.post('/api/users', newUser)             
  console.log(res)
} catch (err) {
  console.error(err)
}

验证步骤 #

修复完成后按顺序启动服务：

• 先启动Express后端服务，确保运行在5000端口
• 再启动React前端服务，提交表单测试即可

更优实现方案 #

• 跨域处理：如果后续不想用proxy配置，可以安装cors包，在服务端配置跨域规则，更灵活适配多环境部署
• 接口统一前缀：所有后端接口都统一加/api前缀，和前端静态资源路径做区分，避免生产环境路由冲突
• 错误统一处理：服务端增加全局错误捕获中间件，前端封装axios请求响应拦截器，统一处理报错逻辑
• 参数校验：接口层增加请求参数校验，避免非法参数进入业务逻辑

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