问题描述 #

我是MERN栈的新手，目前在使用Axios和Express实现数据提交时遇到了问题。我的页面中有一个表单，希望将表单数据提交到后端并在控制台打印出来。该页面是一个包含onsubmit提交函数的组件，提交函数会向server.js发送POST请求，后端收到请求后应在控制台打印数据，但提交时一直出现404错误。已确认依赖安装正确。

前端提交函数代码：

onSubmit(e) {
    e.preventDefault();
    console.log(`Form submitted:`);
    console.log(` ${this.state.searchquery}`);
    const newSearchQuery = {
        searchquery: this.state.searchquery,
    };
    axios.post('http://localhost:3000/', newSearchQuery)
        .then(res => console.log(res.data)).then(
            (response) => {
                console.log(response)
            },
            (error) => {
                console.log(error)
            }
        );;
    this.setState({
        searchquery: '',
    })
}

后端server.js代码：

const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const todoRoutes = express.Router();
const PORT = 3000;

app.use(cors());
app.use(bodyParser.json());

todoRoutes.route('/').post(function(req, res) {
    console.log(req.body);
});

app.listen(PORT, function() {
    console.log("Server is running on Port: " + PORT);
});

回答 #

嘿，我仔细看了你的代码，问题其实很直观——你定义了路由但没把它挂载到Express应用上！这就导致后端根本没有处理根路径POST请求的逻辑，自然返回404了。下面是具体的解决步骤：

1. 挂载路由到Express应用

在server.js里，你创建了todoRoutes这个路由对象，但从来没告诉Express要使用它。需要在定义完路由后添加一行挂载代码：

// 把todoRoutes挂载到根路径，这样所有根路径的请求都会交给这个路由处理
app.use('/', todoRoutes);

2. 完善后端路由的响应逻辑

你的POST路由只打印了请求体，但没有给前端返回任何响应，这样前端的请求会一直处于pending状态，甚至可能超时。最好加上成功响应：

todoRoutes.route('/').post(function(req, res) {
    console.log(req.body);
    // 返回JSON格式的成功响应，让前端知道请求已处理
    res.status(200).json({ message: '数据接收成功', receivedData: req.body });
});

3. 可选：避免端口冲突（如果用Create React App）

如果你前端用的是Create React App，它默认的运行端口也是3000，和后端端口重复会导致其中一个无法启动。建议把后端端口改成5000：

• 修改server.js里的PORT为5000
• 前端Axios请求地址改成http://localhost:5000/

修改后的完整server.js代码

const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const todoRoutes = express.Router();
const PORT = 5000; // 改成5000避免和React默认端口冲突

app.use(cors());
app.use(bodyParser.json());

todoRoutes.route('/').post(function(req, res) {
    console.log(req.body);
    res.status(200).json({ success: true, data: req.body });
});

// 关键：挂载路由
app.use('/', todoRoutes);

app.listen(PORT, function() {
    console.log("Server is running on Port: " + PORT);
});

这样修改后，再提交表单应该就能正常触发后端的打印逻辑，也不会再出现404错误啦！

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