React中Axios调用Express POST接口返回404问题求助

嘿，我一眼就发现问题所在啦！你的前端代码里用Axios发送的是POST请求，但后端的server.js里只定义了GET类型的/register路由，这就导致请求找不到对应的处理接口，直接返回404错误。另外还有几个小细节可以优化，咱们一步步来搞定：

1. 修复后端路由的请求方法 #

后端需要把GET改成POST，同时还要添加express.json()中间件来解析前端发送的JSON格式请求体，不然拿不到你传的用户名和密码。修改后的server.js代码如下：

const express = require("express"),
app = express(),
port = process.env.PORT || 31001,
cors = require("cors");

// 添加这个中间件，解析JSON请求体
app.use(express.json());
app.use(cors());

app.listen(port, () => console.log("Backend server live on " + port));

// 将GET改为POST，匹配前端的请求方法
app.post("/register", (req, res) => {
  // 现在可以获取前端传过来的参数了
  const { userName, password } = req.body;
  console.log("收到注册请求：用户名=", userName, "密码=", password);
  res.send({ message: "注册请求已成功接收！" });
});

2. 利用Proxy优化前端请求路径 #

你已经在package.json里配置了proxy，所以不用在Axios里写完整的http://localhost:31001，直接用相对路径/register即可，Proxy会自动帮你转发请求到后端。修改前端的Axios请求部分：

Axios({
  method: "POST",
  url: "/register", // 改成相对路径，借助Proxy转发
  data,
  headers: { "Content-Type": "application/json" }
}).then(res => {
  console.log(res.data.message);
}).catch(err => {
  console.error("请求出错：", err);
});

3. 调整异步请求的逻辑顺序 #

你当前的代码里，在Axios请求还没完成的时候就判断跳转，这会导致请求可能还没发送成功就跳转到登录页。应该把页面跳转逻辑放在Axios请求的then回调里，确保请求成功后再跳转：

function signMeUp(e){
  e.preventDefault()
  let userName = document.getElementById('username')?.value
  let password = document.getElementById('password')?.value
  let data = {
    userName,
    password,
  }

  // 先验证输入是否为空
  if(!userName || !password){
    alert('Enter a username / password')
    return // 验证不通过直接返回，不发送请求
  }

  Axios({
    method: "POST",
    url: "/register",
    data,
    headers: { "Content-Type": "application/json" }
  }).then(res => {
    console.log(res.data.message);
    // 请求成功后再跳转登录页
    history.push("/Login");
  }).catch(err => {
    console.error("注册失败：", err);
    alert("注册出错啦，请稍后重试");
  });
}

最后一步：重启服务 #

修改完后端代码后，一定要重启你的Express服务器；前端如果是用Create React App创建的，也建议重启一下开发服务器，确保Proxy配置生效。

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