React中如何从app.post接口获取数据？解决GET请求404问题

问题根源 #

你在后端server.js中定义的是POST类型的/trip接口，但前端App.js里用axios.get()发送的是GET请求，HTTP请求方法不匹配，导致服务器找不到对应的接口，返回404错误。

两种修复方案 #

方案一：前端改用POST请求（推荐，保持后端接口定义不变） #

修改App.js中的请求方法，和后端接口类型一致：

//App.js
axios.post('http://localhost:3000/trip')
  .then((response) => {
    console.log(response.data); // 这里就能拿到后端返回的db数据了
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

如果需要向后端传递参数，可以在post方法的第二个参数传入数据：

axios.post('http://localhost:3000/trip', { key: 'value' })
// 后端可以通过req.body获取这些参数

方案二：后端修改为GET接口（如果业务逻辑允许用GET） #

调整server.js中的接口方法为get，匹配前端的请求类型：

//server.js
app.get('/trip', function(req, res){
  var params = "something";
  getResult(params).then((db)=>{
    res.send(db);
    res.end();
  });
});

修改后，前端原有的axios.get()请求就能正常获取数据。

额外注意：跨域问题 #

如果前端运行端口（比如3000）和后端端口不同，可能会出现跨域报错。可以在后端配置CORS中间件解决：

1. 安装cors依赖：

npm install cors

2. 在server.js中引入并使用：

const cors = require('cors');
app.use(cors()); // 放在接口定义之前

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