React+Vite项目连接后端报错：ECONNREFUSED 127.0.0.1:3000

核心问题 #

你遇到的ECONNREFUSED 127.0.0.1:3000错误，本质是你的Express后端服务根本没启动——当前npm run dev只启动了Vite前端开发服务器（端口5173），而监听3000端口的Express服务完全没运行。此外代码中还存在ViteExpress用法错误、模块导入混用的问题。

具体修复步骤 #

1. 补全缺失依赖 #

你的代码中使用了ViteExpress，但package.json里没有安装这个包，先执行安装：

npm install vite-express

2. 修正server.js代码问题 #

• 移除未定义的ViteExpress.bind(app, server)语句（server变量从未声明，属于无效代码）
• 统一使用ES模块语法（因为package.json设置了"type": "module"，禁止混用require）
• 添加数据库连接和接口请求的错误捕获，避免无提示失败

修改后的server.js：

import express from "express";
import ViteExpress from "vite-express";
import cors from "cors";
import { Pool } from "pg";
import dotenv from "dotenv";

dotenv.config();
const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());
app.use(express.static("client"));
app.use(cors());

// 数据库连接，添加错误捕获
const pool = new Pool({ connectionString: process.env.DATABASE_URL });
pool.connect()
  .then(() => console.log("数据库连接成功"))
  .catch(err => console.error("数据库连接失败:", err));

app.get("/api/users", (req, res) => {
  pool.query("SELECT * FROM users")
    .then((result) => {
      res.send(result.rows);
    })
    .catch(err => {
      console.error("查询用户失败:", err);
      res.status(500).send("查询用户失败");
    });
});

// ViteExpress会同时启动Express后端和Vite前端开发服务器
ViteExpress.listen(app, port, () => {
  console.log(`服务运行在 http://localhost:${port}`);
});

3. 修改package.json的启动脚本 #

把原来的dev脚本改成启动server.js，因为ViteExpress会自动集成Vite前端服务：

{
  "scripts": {
    "dev": "node server.js",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  }
}

4. 前端请求优化（可选） #

如果前端代码中直接硬编码请求http://127.0.0.1:3000/api/users，现在启动后就能正常访问。也可以配置Vite代理，让前端请求/api时自动转发到后端，避免跨域和硬编码端口：
在项目根目录创建vite.config.js，添加代理配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
})

之后前端只需请求/api/users即可。

验证启动 #

执行npm run dev，终端应该会输出类似内容：

数据库连接成功
服务运行在 http://localhost:3000
VITE v4.3.4  ready in XXX ms

此时访问http://localhost:3000即可打开前端页面，同时http://localhost:3000/api/users能正常返回数据。

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