MERN项目React表单onSubmit请求Express接口返回POST 404错误如何解决

问题根源 #

404错误的核心原因是服务端仅定义了GET方法的/api/register路由，而前端表单提交时发起的是POST请求，Express未匹配到对应路由因此返回404。浏览器直接访问地址默认发送GET请求，所以可以正常得到响应。

此外现有代码还存在隐含问题：GET请求没有请求体，你在app.get的回调中打印req.body只会得到undefined，无法拿到前端提交的表单数据。

修复方案 #

只需要修改server/index.js中的路由定义，将app.get替换为app.post即可：

const express = require('express')
const app = express()
const cors = require('cors')

app.use(cors())
app.use(express.json())

// 把原有的app.get改为app.post
app.post('/api/register', (req, res) =>{
    console.log(req.body) // 现在可以正常拿到前端提交的name、email、password数据
    res.json({status:'ok'})
})

app.listen(1337,() =>{
    console.log('Server started on 1337')
})

补充建议 #

• 提交用户注册信息这类包含敏感数据的请求，标准规范使用POST方法，不要使用GET，避免敏感信息泄露在URL访问日志中
• 可以在前端的fetch请求外层添加try...catch捕获异常，避免服务端异常时前端直接抛出JS错误
• 测试时确保服务端处于运行状态，1337端口未被其他进程占用

内容的提问来源于stack exchange，提问作者Ripandeep Singh Khangura