Node.js+React.js应用中无效API请求时如何展示404错误页面？

核心问题在于你当前的代码中，app.get('*')会捕获所有GET请求（包括API接口的无效请求），导致后端404中间件要么拦截前端路由，要么被前端路由覆盖。解决思路是区分API请求和前端路由请求，分别处理：

步骤1：调整后端中间件顺序与逻辑 #

方案一：基于API前缀区分（推荐，逻辑清晰） #

将API路由、静态资源、API 404处理、前端路由按以下顺序挂载：

const express = require('express');
const path = require('path');
const app = express();

// 1. 先挂载所有API路由（示例：假设你的API都在/api前缀下）
app.use('/api', require('./routes/api'));

// 2. 处理React build后的静态资源（CSS、JS、图片等）
app.use(express.static(path.join(__dirname, 'build')));

// 3. 处理API的404请求：只有/api前缀下的无效路由才返回后端404
app.use('/api', (req, res) => {
  res.status(404).send('Route does not exist');
});

// 4. 处理前端路由：所有非API、非静态资源的GET请求返回React的index.html，由前端路由接管
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

方案二：基于请求头区分（适合无统一API前缀的场景） #

通过检查请求的Accept头判断是否为API请求（一般API请求会接受JSON格式）：

const express = require('express');
const path = require('path');
const app = express();

// 1. 挂载所有API路由
app.use(require('./routes/api'));

// 2. 处理静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 3. 区分API与前端请求
app.use((req, res, next) => {
  // 如果是API请求（接受JSON）且不是静态资源请求，返回后端404
  if (req.accepts('json') && !req.path.startsWith('/static')) {
    return res.status(404).send('Route does not exist');
  }
  // 否则交给前端路由处理
  next();
});

// 4. 返回前端入口文件
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

步骤2：配置React前端的404页面 #

在React路由中添加一个匹配所有路径的路由，渲染自定义的404页面：

// 示例：使用React Router v6
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      {/* 匹配所有未定义的前端路由，渲染404页面 */}
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}

export default App;

原理说明 #

• API路由优先处理：有效API请求正常响应，无效API请求被专门的404中间件拦截
• 静态资源由express.static直接返回，不会进入后续路由逻辑
• 前端路由请求会返回index.html，React Router接管后，匹配到未定义的路径时渲染前端404页面
• 这样既保证了API接口的404提示，又不影响前端路由的正常运行

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