Hostinger VPS上Next.js无法连接对应Express.js后端问题求助

问题根源 #

你前端代码里硬编码了请求地址 http://localhost:8080/api/login，当前端在浏览器中运行时，localhost 指向的是用户本地机器，而非部署前端的VPS服务器，所以会优先连接你本地的后端服务，关闭本地服务后自然无法获取数据。

解决方案 #

下面是几种可行的解决方法，按推荐程度排序：

1. 配置反向代理（推荐）

因为前后端都部署在同一台VPS上，利用CloudPanel的反向代理功能，把前端域名下的 /api 路径转发到后端的8080端口：

• 登录CloudPanel，找到你的Next.js前端应用设置
• 添加反向代理规则：将请求路径 /api/* 转发到 http://localhost:8080/api/*（这里的localhost是VPS内部的回环地址，能直接访问同机器上的后端）
• 前端代码中改用相对路径请求：

  fetch('/api/login', {
      method: 'POST',
      headers: {
          'content-type': 'application/json'
      },
      body: JSON.stringify({
          email,
          password
      })
  })
  

这样既不用暴露后端端口，也避免了硬编码IP/域名的问题。

2. 使用VPS公网IP/域名替换localhost

直接把前端代码里的请求地址改成VPS的公网IP或绑定的域名：

• 替换后的请求地址示例：http://你的VPS公网IP:8080/api/login 或 http://你的域名:8080/api/login
• 注意：必须确保VPS的防火墙/安全组已经开放8080端口，允许外部访问

3. 配置Next.js环境变量（规范做法）

通过环境变量管理API地址，避免硬编码：

• 在Next.js项目根目录创建 .env.production 文件，添加：

  NEXT_PUBLIC_API_URL=http://你的VPS公网IP:8080
  

• 前端代码中通过环境变量拼接地址：

  fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/login`, {
      // 其余代码不变
  })
  

• 部署到CloudPanel时，确保应用能正确读取该环境变量（CloudPanel通常会自动加载项目根目录的.env文件）

验证步骤 #

1. 修改代码或配置后，重新部署前端应用
2. 关闭本地的Express后端服务
3. 测试前端登录功能，确认能正常获取VPS上后端返回的数据

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