React与Express后端登录接口连接异常：Postman请求卡住

核心问题原因 #

后端/login接口仅执行console.log但未向客户端返回任何响应，HTTP请求的生命周期没有被正确结束，导致客户端（Postman/React）会一直等待服务器的响应，最终请求超时或卡住。

1. 修复后端server.js的/login接口 #

无论接口逻辑执行结果如何，必须调用响应方法结束请求周期。以下是Express框架下的修复示例：

// server.js 中的/login接口
const express = require('express');
const app = express();

// 先解析请求体（处理POST参数必备）
app.use(express.json());

app.post('/login', (req, res) => {
  console.log("Connection Made");
  
  // 必须返回响应，结束请求生命周期
  // 示例1：返回基础成功消息
  res.status(200).json({ success: true, message: "连接已建立" });
  
  // 示例2：扩展登录验证逻辑（可选）
  // const { username, password } = req.body;
  // if (username === 'admin' && password === '123456') {
  //   res.status(200).json({ token: 'your-auth-token' });
  // } else {
  //   res.status(401).json({ success: false, message: "用户名或密码错误" });
  // }
});

app.listen(8080, () => {
  console.log('后端服务运行在http://127.0.0.1:8080');
});

关键：必须调用res.send()、res.json()或res.end()这类方法，让服务器向客户端返回状态码和响应内容，结束当前请求。

2. 优化前端Login页面的fetch请求 #

添加错误处理和正确的请求配置，避免无反馈的失败：

// Login页面的登录请求逻辑
const handleLogin = async () => {
  const loginData = { username: 'test', password: '123456' };
  
  try {
    const response = await fetch('http://127.0.0.1:8080/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json', // 匹配后端的请求体解析方式
      },
      body: JSON.stringify(loginData),
    });

    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }

    const result = await response.json();
    console.log('登录响应:', result);
    // 这里添加登录成功后的逻辑，比如跳转首页、存储token等
  } catch (error) {
    console.error('登录出错:', error);
    // 提示用户登录失败，比如弹出错误提示框
  }
};

3. 正确配置React开发环境代理（解决跨域问题） #

如果前端React服务（默认3000端口）和后端服务（8080端口）端口不同，可以通过代理避免跨域：

1. 在React项目的package.json中添加：

"proxy": "http://127.0.0.1:8080"

2. 重启React开发服务（配置修改后必须重启才会生效）
3. 前端请求时使用相对路径：

fetch('/login', { ... }) // 无需写完整的http://127.0.0.1:8080

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