Vite创建的React应用无法识别Node.js后端Express路由求助

一、解决仅启动React、无法识别Express路由的问题 #

1. 确保Express服务能独立启动 #

你的index.js仅导出了Express实例，但没有启动服务。需要添加启动代码：

const express = require('express');
const app = express();
const path = require('path');
const cors = require('cors');
const { handleLogin } = require('./controllers/user.controller');
const bodyParser = require('body-parser');

app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());

app.set('port', process.env.PORT || 3000);
app.set('app', path.join(__dirname, 'app'));

app.post('/api/login', handleLogin);

// 添加服务启动代码
app.listen(app.get('port'), () => {
  console.log(`Server running on http://localhost:${app.get('port')}`);
});

module.exports = app;

2. 配置Vite代理转发前端请求 #

Vite默认运行在5173端口，Express运行在3000端口，前端请求/api/login会直接发到Vite端口，需要配置代理转发到Express：

在项目根目录的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
      }
    }
  }
})

3. 同时启动两个服务 #

• 启动Express后端：node index.js
• 启动Vite前端：npm run dev

二、修复500 Internal Server Error #

1. 为请求添加响应 #

你的handleLogin函数没有向客户端发送任何响应，导致请求超时，服务器返回500错误。修改user.controller.js：

// 移除重复的Express实例配置（这些在主index.js中已配置）
// const express = require('express');
// const cors = require('cors');
// const app = express();
// app.use(cors());
// app.use(express.json());

const handleLogin = (req, res) => {
  const { username, password } = req.body;
  console.log("username: ", username, "password: ", password);
  
  // 必须发送响应，示例：
  if (username && password) {
    res.status(200).json({ success: true, message: '登录请求已处理' });
  } else {
    res.status(400).json({ success: false, message: '用户名或密码不能为空' });
  }
};

module.exports = {
  handleLogin
}

2. 移除Controller中的重复配置 #

Controller不需要重新创建Express实例和配置CORS、JSON解析，这些逻辑应该统一放在主index.js中，避免冲突。

验证 #

完成上述修改后，重新启动后端和前端，提交登录表单时：

• 后端控制台会打印用户名和密码
• 前端会收到正确的响应，不会再出现500错误

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