如何通过Node.js将React web应用路由到localhost:5000/api等自定义路径

要实现 React 应用在 /api 路径下加载，需要同时修改 Node 后端配置和 React 项目本身的配置，步骤如下：

1. 后端 server.js 修改 #

你需要将静态资源挂载路径和页面返回路由都调整到 /api 前缀下，同时修正原代码中冗余的逻辑和笔误（原开发环境代码中 npath 为笔误，统一使用 path），修改后完整代码如下：

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

app.use(express.json({ extended: false }));

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header(
      'Access-Control-Allow-Headers',
      'Origin, X-Requested-With, Content-Type, Accept'
    );
    next();
});

// 静态资源挂载到/api路径下
app.use('/api', express.static(path.join(__dirname, "client", "build")));

// 生产环境逻辑
if (process.env.NODE_ENV === 'production') {
  // 所有/api开头的请求都返回React的index.html，支持前端路由
  app.get('/api/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
} else {
  // 开发环境逻辑
  app.get('/api/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

// 保留原来的根路径下的其他接口逻辑（如果有的话）
// app.get('/其他接口', ...)

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`服务运行在端口${PORT}`));

2. React 项目配置修改 #

只改后端会导致 React 静态资源引用、路由跳转路径错误，需要同步修改 React 配置：

• 如果是 create-react-app 搭建的项目，在 package.json 中新增配置项：

  "homepage": "/api"
  

• 如果项目使用了 react-router 做前端路由，给路由组件增加 basename 属性：

  // 以react-router v6为例
  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter basename="/api">
      {/* 你的应用其他组件 */}
    </BrowserRouter>
  );
  

3. 配置生效 #

1. 进入 React 项目的client目录，重新执行 npm run build 生成新的构建产物
2. 重启 Node 后端服务
3. 访问 http://localhost:5000/api 即可正常加载 React 应用

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