React+Node.js联调POST请求报Cannot GET /错误排查求助

核心问题总览 #

当前代码存在3类配置/写法错误，直接导致接口不通、根路径访问报错：

• 后端Express路由定义规则使用错误，接口路径完全无法匹配
• 前端React状态更新语法错误，无法获取用户输入的表单数据
• 前端请求逻辑写法不规范，出错后无有效报错信息，且未传递表单参数

后端代码修正（Node.js/Express） #

现存问题 #

1. 路由路径写法错误：Express框架定义接口路由时，只需要填写接口路径部分，不需要写全域名。你当前写的app.post("http://localhost:8000", 处理函数)，实际匹配的是http://localhost:8000/http://localhost:8000这个不存在的路径，前端发往根路径的POST请求根本匹配不到对应处理逻辑。
2. 缺少根路径GET路由：直接在浏览器访问localhost:8000时，浏览器默认发送GET请求到/路径，你没有定义该路径的GET处理逻辑，就会返回Cannot GET /报错。

修正后代码 #

import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import DB from "./env";
const app = express();
app.use(express.json());
app.use(cors({
    origin:["http://localhost:3000"],
}));

// 根路径GET路由，直接访问8000端口时返回提示，解决Cannot GET /报错
app.get("/" , (req,res) => {
    res.send("API service is running");
})
// 修正POST路由路径，只需要写接口路径/即可
app.post("/" , (req,res) => {
    // 打印接收的参数方便调试
    console.log(req.body);
    res.send("done");
})
app.listen(8000, () => {
    console.log("Backend service running on http://localhost:8000")
});

前端代码修正（React） #

现存问题 #

1. 状态更新语法错误：useState返回的更新函数需要直接调用传参，你写的setEmail=(e.target.value)是给变量重新赋值，完全没有触发React状态更新，输入框内容不会随用户输入变化，也拿不到正确的表单值。
2. 输入框onChange事件中多余的e.preventDefault()会阻断输入框的默认输入行为，导致输入异常。
3. Axios导入路径不规范：不需要写node_modules的完整路径，直接导入包名即可，否则容易出现路径匹配错误。
4. POST请求未传递表单参数，且catch块没有打印错误信息，请求出错后无法定位问题。

修正后代码 #

import Navi from "./nav"
import "bootstrap/dist/css/bootstrap.css";
import { useState } from "react";
// 直接导入axios包即可，不需要写node_modules全路径
import axios from "axios";

const Home = () => {
    // 初始值使用空字符串即可
    const [Email, setEmail] = useState("");
    const [Password, setPassword] = useState("");

    // 表单提交逻辑统一绑定在form的onSubmit上
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            // POST请求第二个参数传递表单数据
            const res = await axios.post("http://localhost:8000", {
                email: Email,
                password: Password
            })
            console.log("request sent, response:", res.data)
        } catch (error) {
            // 打印错误信息方便排查
            console.error("Request failed:", error)
        }
    }

    return(
        <>
        <Navi/>
        <h1 className="registerheading">Register</h1>
        <form onSubmit={handleSubmit}>
            <div>
                <label> Email</label>
                <input 
                type="email"
                value={Email}
                onChange={(e) => {
                    // 移除多余的preventDefault，直接调用更新函数传值
                    setEmail(e.target.value);
                }}
                /> 
            </div>
            <div>
                <label>Password</label>
                <input 
                type="password"
                value={Password}
                onChange={(e) => {
                    setPassword(e.target.value);
                }}
                /> 
            </div>
            <div>
                <button type="submit">Submit</button>
            </div>
        </form> 
        </>
    )
}
export default Home;

验证步骤 #

1. 先启动后端服务，浏览器访问http://localhost:8000，看到返回API service is running就说明根路径GET路由正常，Cannot GET /报错消失。
2. 再启动前端服务，输入邮箱密码点击提交，查看后端控制台是否打印出接收到的参数，前端控制台是否打印出请求成功的响应，即可确认接口联通。

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