React+Express项目刷新页面出现Cannot GET /错误求助

问题原因 #

React使用BrowserRouter实现的是客户端路由，正常跳转时由JS在前端处理路径切换。但刷新页面时，浏览器会直接向服务器发起GET /login这类路径请求，而你的Express后端没有配置对应路径的GET路由，因此返回Cannot GET /xxx错误。POST请求正常是因为你已经定义了/login的POST路由。

解决方案一：配置Express兜底路由（推荐） #

让Express在处理完API请求后，对所有未匹配的GET请求返回React的index.html，交由React客户端路由接管后续逻辑。

步骤： #

1. 构建React项目
   在前端项目目录执行：

npm run build

这会生成build文件夹（部分项目可能是dist），包含编译后的静态资源文件。

2. 修改Express后端代码
   引入path模块，配置静态文件服务，并添加通配符兜底路由：

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const path = require("path"); // 新增
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 先处理API路由（保留原POST逻辑）
app.post("/login", (req, res) => {
    const username = req.body.username;
    const password = req.body.password;
    console.log(username + " " + password);
    res.status(200).send("ok");
});

// 配置静态文件服务，指向React构建后的文件夹
// 根据你的项目结构，路径为../frontend/build（frontend是前端目录）
app.use(express.static(path.join(__dirname, "../frontend/build")));

// 兜底路由：所有未匹配的GET请求返回React入口文件
app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "../frontend/build/index.html"));
});

app.listen(3000, () => {
    console.log("server connected on port 3000");
});

关键说明： #

• API路由必须放在静态文件服务和兜底路由之前，避免被兜底逻辑拦截。
• 静态文件服务让Express能正确返回React的CSS、JS等资源文件。
• 兜底路由确保任何GET请求都返回React入口文件，由客户端路由处理路径匹配。

解决方案二：改用HashRouter（快速临时方案） #

如果不想修改后端，可将React的BrowserRouter替换为HashRouter，此时URL会带上#（例如http://localhost:3000/#/login），刷新时浏览器只会请求根路径，不会触发服务器端的路径请求，从而避免404。

修改App组件：

import '../style/App.css';
import { HashRouter as Router, Routes , Route } from "react-router-dom"; // 替换路由组件

import Home from './home.jsx';
import Login from './login'
import React from 'react';

function App() {
  return(
      <div>
        <Router>
          <Routes >
            <Route path="/" exact element={<Home/> } />
            <Route path="/login" element={ <Login/>} />
          </Routes >
        </Router>
      </div>
  );
}

export default App;

额外修复：登录请求的body格式问题 #

你的登录POST请求中，body未转为JSON字符串，后端bodyParser.json()无法解析，会导致username和password为undefined。修改Login组件的handlePost：

const handlePost = (e) => {
  e.preventDefault(); // 阻止表单默认提交行为
  fetch('http://localhost:3000/login', {
      method: "POST",
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify({ // 转为JSON字符串
          username: username,
          password: password
      })
    })
    .then((response) => response.text()) // 后端返回的是文本"ok"，不是JSON
    .then((result) => {
      console.log(result)
    })
    .catch(err => console.log(err));
};

开发环境优化：配置代理 #

开发时React默认占用3000端口，和后端冲突，建议将后端端口改为3001，然后在前端package.json中添加代理：

"proxy": "http://localhost:3001"

这样前端请求可简写为fetch('/login')，无需写完整URL，同时避免跨域问题。

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