React登录按钮失效问题（Express后端）

核心问题分析与修复步骤 #

1. 移除前端no-cors模式，配置后端CORS #

no-cors会限制浏览器读取响应数据，完全无法获取后端返回的JSON结果。正确做法是后端配置CORS中间件，前端删除该模式：

修改前端handleSubmit函数：

const handleSubmit = async (e)=>{
  e.preventDefault();
  try {
    const response = await fetch("http://localhost:5000/login",{
      method: "POST",
      headers: {
        'content-type':'application/json'
      },
      body: JSON.stringify({email:credentials.email, password: credentials.password})
    });
    const json = await response.json();
    if(json.success){
      window.history.push("/");
    } else {
      console.error("登录失败:", json.message);
    }
  } catch (err) {
    console.error("请求出错:", err);
  }
}

2. 修正前后端字段不匹配问题 #

前端发送的是email字段，后端却尝试读取req.body.username，导致无法获取正确的用户标识，这是400错误的核心原因之一。根据你的User模型字段调整：

修改后端登录接口的用户初始化代码：

// 若User模型用email作为登录标识，调整为：
const user = new User({
  email: req.body.email, // 替换原有的username: req.body.username
  password: req.body.password
});

3. 重构后端Passport登录流程，返回JSON响应 #

原代码中req.login的使用顺序错误，且后端用res.redirect不适合SPA场景，需要改为返回JSON结果：

修改后端登录接口：

app.post("/login", function(req, res){
  passport.authenticate("local", function(err, user, info) {
    if (err) {
      return res.status(500).json({success: false, message: "服务器内部错误"});
    }
    if (!user) {
      return res.status(401).json({success: false, message: info?.message || "邮箱或密码错误"});
    }
    req.login(user, function(err) {
      if (err) {
        return res.status(500).json({success: false, message: "会话建立失败"});
      }
      return res.json({success: true, message: "登录成功"});
    });
  })(req, res);
});

4. 配置后端JSON解析与CORS中间件 #

确保Express app能解析JSON请求体，并允许前端跨域访问：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许前端域名跨域
app.use(cors({
  origin: "http://localhost:3000", // 你的React前端端口
  credentials: true // 需要传递会话Cookie时开启
}));

// 解析JSON请求体
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 后续配置Passport、路由等

5. 检查Passport Local策略实现 #

确保策略正确从MongoDB查询用户，并对比哈希密码（禁止明文存储密码）：

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const bcrypt = require('bcrypt');
const User = require('./models/User');

passport.use(new LocalStrategy({
  usernameField: 'email' // 指定用email作为登录标识字段
}, function(email, password, done) {
  User.findOne({ email: email }, function (err, user) {
    if (err) return done(err);
    if (!user) return done(null, false, { message: '邮箱未注册' });
    
    // 对比哈希密码
    bcrypt.compare(password, user.password, function(err, isMatch) {
      if (err) return done(err);
      return isMatch ? done(null, user) : done(null, false, { message: '密码错误' });
    });
  });
}));

// 配置序列化/反序列化用户
passport.serializeUser((user, done) => done(null, user.id));
passport.deserializeUser((id, done) => User.findById(id, done));

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