Node.js集成React：如何将端口号转换为路径式访问地址

一、Node.js服务器端配置（以Express为例） #

核心是将/admin路径映射到React打包后的静态文件，/server路径映射到API接口，同时处理React单页应用的路由 fallback。

1. 安装必要依赖：

npm install express path

2. 服务器主文件（如server.js）配置：

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

// 解析JSON请求体
app.use(express.json());

// 托管React打包产物，映射到/admin路径
app.use('/admin', express.static(path.join(__dirname, 'react-app/build')));

// React SPA路由 fallback：所有/admin下的非静态资源请求返回index.html
app.get('/admin/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'react-app/build', 'index.html'));
});

// 挂载/server前缀的API路由
// 假设你的API路由定义在./routes/api.js文件中
app.use('/server', require('./routes/api'));

// 监听80端口（访问时直接用localhost，无需加端口）
// Windows需管理员权限启动，Linux/macOS需加sudo
app.listen(80, () => {
  console.log('服务器已启动：http://localhost');
});

二、React应用端配置 #

1. 路由适配/admin路径 #

如果使用React Router，需设置basename确保路由正确匹配：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';

function App() {
  return (
    <Router basename="/admin">
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 其他页面路由配置 */}
      </Routes>
    </Router>
  );
}

export default App;

2. API请求路径配置 #

将API请求的 baseURL 改为/server，确保同域请求：

// 示例：使用axios发起请求
import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/server',
});

// 调用接口示例
async function fetchData() {
  const response = await apiClient.get('/your-api-endpoint');
  console.log(response.data);
}

3. 打包React应用 #

运行打包命令生成静态文件：

npm run build

将生成的build文件夹放在Node服务器可访问的路径下（如上述配置中的react-app/build）。

三、验证效果 #

1. 启动Node服务器：

node server.js

2. 访问http://localhost/admin，React应用应正常加载；
3. 在React应用中发起API请求，会自动转发到http://localhost/server/xxx，无需跨域配置。

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