在cPanel部署React+Node应用后，React页面仅显示空白页求助

核心问题排查与修复 #

1. 生产环境proxy配置不生效 #

create-react-app的proxy字段仅在本地开发阶段有效，部署到cPanel后完全失效。如果你的React应用需要调用Node后端API：

• 直接在代码中使用Node应用的完整部署URL作为API请求前缀，比如把fetch('/api/data')改为fetch('https://你的Node应用域名/api/data')
• 或者在cPanel中通过.htaccess设置反向代理，将React域名下的API请求转发到Node服务地址。

2. 静态资源路径错误导致组件无法加载 #

若build后的资源采用绝对路径，cPanel的静态服务器可能无法正确加载文件：

• 在package.json中添加"homepage": "."，重新执行npm run build后，将生成的build文件夹内容重新上传至cPanel。该配置会让所有资源使用相对路径加载，适配cPanel的目录结构。
• 如果React部署在cPanel的子目录（如你的域名.com/react-app），则将homepage设为"/react-app"。

3. 客户端路由适配问题 #

使用React Router等客户端路由时，cPanel默认的静态服务器无法处理非根路径请求，甚至首页也可能因路由逻辑异常显示空白：

• 检查根路由对应的组件是否能正常渲染，排查是否存在重定向、权限拦截等逻辑导致页面未显示
• 在React的部署目录新建.htaccess文件，写入以下内容以适配客户端路由：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

4. 隐藏的JS渲染错误 #

控制台能看到样式不代表没有JS异常，部分静默错误会阻止组件渲染：

• 打开浏览器控制台的「Errors」标签，排查未捕获的异常（如API请求失败、未定义变量等）
• 检查index.js中的挂载逻辑，确认createRoot(document.getElementById('root'))的目标ID与public/index.html中的元素ID一致。

额外检查项 #

• 确认上传到cPanel的是build文件夹内的所有文件，而非整个React项目目录
• 检查文件权限：静态文件（js、css、html）设置为644，文件夹设置为755，避免服务器无法读取文件。

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