如何在cPanel/共享主机中让React Router与Node.js/Express路由同时正常运行

1. 统一后端路由前缀 #

修改服务端app.js，给所有后端接口添加统一前缀（比如/api），避免和前端路由路径冲突：

// 示例：原路由注册
// app.use('/users', userRoutes)
// 改为批量添加/api前缀
app.use('/api', userRoutes)
// 其余路由也按同样规则统一挂载到/api前缀下

修改后所有后端接口路径都会变成domain.com/api/xxx的格式。

2. 调整前端请求配置 #

前端所有调用后端接口的请求，统一加上/api前缀，示例：

// 原请求写法
// axios.get('/users')
// 修改后
axios.get('/api/users')

3. 修改.htaccess配置 #

保留原有Node.js Passenger配置，在重写规则中新增/api路径的放行规则，完整配置参考：

# 原有cPanel生成的Node.js/Passenger配置不要删除，保留在最前面
PassengerAppRoot "/home/username/server"
PassengerAppType node
PassengerStartupFile app.js
PassengerAppEnv production

RewriteEngine On
RewriteBase /

# 新增：放行所有/api开头的请求，直接交给Node.js服务处理
RewriteRule ^api/.*$ - [L]

# 原有React路由重写规则
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

4. 生效验证 #

保存.htaccess后，到cPanel的Node.js应用管理页面重启服务，再分别测试：

• 访问domain.com/about等前端路由，正常返回React页面
• 访问domain.com/api/xxx等后端接口，正常返回接口数据

原理说明 #

之前的配置把所有非静态文件的请求都重定向到了React的index.html，导致后端接口请求也被拦截返回前端页面。新增的/api路径放行规则会优先处理后端接口请求，剩下的非静态请求再走React路由重写规则，两者互不冲突。

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