React（react-router）与Express后端API路由配置问题

问题背景 #

你开发了前后端分离的应用：React前端运行在0.0.0.0:3000，Express后端运行在0.0.0.0:6969。需要让所有/api/v1开头的请求转发到后端，而不是触发前端的PageDoesntExist页面，同时用户可以通过0.0.0.0:3000/api/v1/{request}发起请求。你已经配置了package.json的proxy，但问题仍未解决。

核心原因 #

React Router的通配符路由(path="*")会匹配所有未定义的路径，包括/api/v1开头的请求，导致这些请求被前端路由拦截，无法触发代理转发到后端。

解决方案 #

1. 修改React路由配置，排除/api/v1路径

在通配符路由之前添加一个专门匹配/api/v1/*的路由，让前端路由不处理这类请求，直接交给开发服务器的代理机制。修改后的front-end/index.js：

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 优先匹配/api/v1路径，交给代理处理 */}
        <Route path="/api/v1/*" element={null} />
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="userpage" element={<UserPage />} />
          <Route path="*" element={<PageDoesntExist />} />
        </Route>
        <Route path="login" element={<Login />} />
        <Route path="signup" element={<Signup />} />
      </Routes>
    </BrowserRouter>
  );
}

将/api/v1/*的路由元素设为null，前端路由不会渲染任何组件，请求会直接进入开发服务器的代理流程。

2. 确保Proxy配置生效

• 确认front-end/package.json中的proxy配置正确：

  ...
  "proxy":"http://0.0.0.0:6969",
  ...
  

• 修改proxy配置后必须重启前端开发服务器，否则新配置不会生效。

3. 验证后端路由前缀

确保Express后端的app.js中正确挂载了/api/v1前缀的路由，例如：

// back-end/app.js 示例
const express = require('express');
const app = express();
const version = '1';

// 挂载/api/v1前缀的路由集合
app.use(`/api/v${version}`, require('./routes/apiRoutes'));

module.exports = { app, version };

如果后端没有配置对应前缀的路由，即使请求转发过去也会返回404。

4. 正确发起前端请求

前端发起请求时使用相对路径，比如：

fetch('/api/v1/user')
  .then(res => res.json())
  .then(data => console.log(data));

这个请求会被自动代理到http://0.0.0.0:6969/api/v1/user。

生产环境注意事项 #

如果是生产环境部署，create-react-app的proxy配置不生效，需要用Nginx等服务器做反向代理，示例配置：

server {
  listen 3000;
  server_name your-domain;

  # 处理前端静态资源和路由
  location / {
    root /path/to/front-end/build;
    try_files $uri $uri/ /index.html;
  }

  # 转发/api/v1请求到后端
  location /api/v1 {
    proxy_pass http://0.0.0.0:6969;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

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