部署在cPanel的React+Node.js应用Axios请求失败求助

核心问题分析 #

你的请求被cPanel的Web服务器（Apache/Nginx）默认路由到了React静态文件，而非Node.js后端；同时端口配置错误导致请求被拒绝，这是同域名部署前端+后端的典型配置问题。

1. 配置cPanel反向代理规则（关键步骤） #

cPanel的Node.js应用会分配一个内部端口（不是80/443/8080），需要通过.htaccess将API请求转发到后端，静态请求留给React。
在域名根目录（通常是public_html）的.htaccess文件中添加以下规则：

RewriteEngine On

# 所有/api开头的请求转发到Node.js后端（替换成你的后端内部端口）
RewriteRule ^api/(.*)$ http://localhost:12345/$1 [P,L]

# 其他请求指向React入口文件（处理前端路由）
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.html [L]

• 后端内部端口可在cPanel的「Node.js应用」页面查看（启动应用后会显示）。

2. 修正Axios请求路径 #

删除请求URL中的端口号，直接使用相对路径：

// 错误写法：指定端口导致连接被拒或路由错误
axios.get('http://你的域名:8080/api/data')

// 正确写法：自动适配当前域名的协议/端口
axios.get('/api/data')

• 之前指定80/8080端口出现空白，是因为这些端口被Web服务器占用，直接访问端口会绕过反向代理，后端无法响应静态文件。

3. 验证后端是否接收请求 #

在后端API路由中添加日志，确认请求是否到达：

app.get('/api/data', (req, res) => {
  console.log('API请求已接收:', req.path);
  // 你的业务逻辑
});

然后在cPanel的「Node.js应用」页面查看日志，如果没有日志输出，说明反向代理规则未生效。

4. 检查Postman请求路径 #

Postman返回React HTML，说明请求被路由到了前端静态文件。确保请求的是API路径，例如：

https://你的域名/api/data

而非根路径https://你的域名。

5. 确认cPanel Node.js应用配置 #

• 后端代码需放在独立目录（如public_html/backend），而非前端build目录。
• 在cPanel的「Node.js应用」中，正确设置启动文件路径（如backend/server.js）和启动命令（如node server.js）。

6. 适配HTTPS环境 #

如果域名启用了HTTPS，确保：

• .htaccess的反向代理规则使用https://localhost:端口（部分cPanel环境需要）。
• Axios使用相对路径，自动继承页面的HTTPS协议，避免浏览器混合内容拦截。

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