在GoDaddy上实现React应用与Node.js/Express后端的连接问题

环境与问题背景 #

• 技术栈：React前端 + Node.js/Express后端 + MySQL数据库
• 部署环境：GoDaddy带cPanel的共享主机
• 现状：前端、后端单独部署均正常（后端可连接MySQL），但前后端无法互通；本地开发环境下一切运行正常

现有关键代码 #

后端Express连接配置 #

app.use(cors({ credentials: true, origin: "http://the-website.com/" }));

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

const connection = mysql.createConnection({
  user: "theUser",
  host: "localhost",
  password: "thePassword",
  database: "theDatabase",
});

React前端.htaccess文件 #

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

本地与部署后的Axios请求 #

本地开发版本

const MoveToProfile = async () => {
      const formData = new FormData();
      formData.append('email', inputEmail.current.value);
      formData.append('password', inputPassword.current.value);
      
      try {
        await axios.post("http://localhost:3000/login", formData).then((response) => {
          if (response.data.auth) {
      // ... 后续逻辑

部署修改版本（出现超时）

const MoveToProfile = async () => {
      const formData = new FormData();
      formData.append('email', inputEmail.current.value);
      formData.append('password', inputPassword.current.value);
      
      try {
        await axios.post("http://the-website.com:3001/login", formData).then((response) => {
          if (response.data.auth) {
      // ... 后续逻辑

已尝试的无效方案 #

曾尝试修改.htaccess做反向代理，代码如下，但未生效：

RewriteEngine on
RewriteRule  (.*)  http://localhost:3000/$1  [P,L] 

核心疑问 #

能否通过.htaccess实现React与后端3000端口的连接？如何解决前后端互通的超时问题？

解决方案与技术建议 #

1. 核心原因：共享主机端口限制 #

GoDaddy共享主机不允许对外暴露非标准端口（如3000、3001），外部请求无法直接访问这些端口，这是超时的根本原因。必须通过反向代理将后端请求映射到域名的子路径（如/api），而非直接用端口访问。

2. 正确配置.htaccess反向代理 #

修改前端的.htaccess文件，添加反向代理规则，将所有/api开头的请求转发到本地运行的后端端口，同时保留原有的React路由重写规则：

<IfModule mod_rewrite.c>
  # 反向代理后端API请求
  RewriteEngine On
  RewriteBase /
  
  # 匹配/api开头的请求，转发到本地后端端口（替换为实际后端监听端口）
  RewriteRule ^api/(.*)$ http://localhost:3000/$1 [P,L]

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

注意：需确保主机已启用mod_proxy和mod_proxy_http模块（可在cPanel的"Apache Modules"中开启）

3. 调整后端配置 #

• CORS设置：将origin改为域名本身（无需端口），避免路径末尾的斜杠：

  app.use(cors({ credentials: true, origin: "http://the-website.com" }));
  

• 端口确认：检查cPanel中Node.js应用管理器分配的端口，确保后端监听的是该端口（不一定是3000）。

4. 修改Axios请求路径 #

将前端请求中的绝对路径改为相对路径/api/login，避免硬编码域名和端口：

const MoveToProfile = async () => {
  const formData = new FormData();
  formData.append('email', inputEmail.current.value);
  formData.append('password', inputPassword.current.value);
  
  try {
    await axios.post("/api/login", formData).then((response) => {
      if (response.data.auth) {
        // ... 后续逻辑
      }
    });
  } catch (error) {
    console.error("登录请求失败：", error);
  }
}

5. 额外排查点 #

• 确认后端服务在cPanel的"Node.js Applications"界面中处于运行状态
• 查看后端日志，确认是否接收到请求（cPanel中可直接查看Node.js应用日志）
• 用curl http://the-website.com/api/login测试反向代理是否生效，检查是否返回后端响应

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