Node+Express+React注册功能网络报错排查（已配置CORS）

一、后端问题排查 #

1. MongoDB连接验证 #

• 核对index.js中的MongoDB连接字符串，确认用户名、密码、集群地址、数据库名无拼写错误。
• 若使用MongoDB Atlas云服务，检查是否允许当前服务器/本地IP访问，测试阶段可临时开启“允许所有IP”权限。
• 给连接代码添加错误捕获，直观查看连接状态：

  mongoose.connect(process.env.MONGO_URI)
    .then(() => console.log('MongoDB连接成功'))
    .catch(err => console.error('MongoDB连接失败:', err));
  

2. 路由响应与参数解析 #

• 确认注册路由是否正确返回响应：终端能接收参数不代表前端能收到反馈，必须在逻辑中返回对应状态码和数据，示例：

  app.post('/api/register', async (req, res) => {
    try {
      const newUser = new User(req.body);
      await newUser.save();
      res.status(201).json({ message: '注册成功', user: newUser });
    } catch (err) {
      // 必须将错误信息返回给前端，而非仅在终端打印
      res.status(400).json({ error: err.message });
    }
  });
  

• 检查是否添加了express.json()中间件，没有它后端无法解析前端发送的JSON格式参数：

  app.use(express.json());
  

3. CORS配置细节 #

• 若已配置CORS仍报错，检查是否限制了特定域名，或未处理OPTIONS请求：

  const cors = require('cors');
  // 测试阶段可放开所有域名
  app.use(cors());
  // 生产环境指定前端域名
  // app.use(cors({ origin: 'http://localhost:3000', credentials: true }));
  

• 若前端请求带凭证（如Cookie），需在CORS配置中开启credentials: true，同时前端请求需添加credentials: 'include'。

二、前端请求检查 #

1. 请求地址与格式 #

• 确认前端请求URL与后端路由完全匹配，比如后端是/api/register，前端不能写成/register或域名错误。
• 检查请求方法为POST，且请求头设置了Content-Type: application/json，示例：

  const registerUser = async (userData) => {
    try {
      const response = await fetch('http://localhost:5000/api/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(userData),
        // 后端开启凭证时需添加
        // credentials: 'include'
      });
      if (!response.ok) {
        const errData = await response.json();
        throw new Error(errData.error || '注册失败');
      }
      return await response.json();
    } catch (err) {
      console.error(err);
      throw err;
    }
  };
  

2. 错误捕获逻辑 #

• 前端需处理HTTP错误状态码（如400、500），而非仅捕获网络错误，通过!response.ok判断并解析后端返回的错误信息。

三、用户模型与数据校验 #

• 检查MongoDB的User模型字段定义是否与前端传入的姓名、邮箱、密码一致，添加必要校验规则：

  const userSchema = new mongoose.Schema({
    name: { type: String, required: true },
    email: { type: String, required: true, unique: true },
    password: { type: String, required: true }
  });
  const User = mongoose.model('User', userSchema);
  

• 捕获邮箱重复的MongoDB唯一索引错误，返回友好提示：

  catch (err) {
    if (err.code === 11000) {
      res.status(400).json({ error: '该邮箱已被注册' });
    } else {
      res.status(400).json({ error: err.message });
    }
  }
  

四、登录功能实现建议 #

• 用bcrypt加密存储密码，禁止明文存储，添加密码验证方法：

  const bcrypt = require('bcrypt');
  // 注册前加密密码
  userSchema.pre('save', async function(next) {
    if (!this.isModified('password')) return next();
    this.password = await bcrypt.hash(this.password, 10);
    next();
  });
  // 登录时验证密码
  userSchema.methods.matchPassword = async function(enteredPassword) {
    return await bcrypt.compare(enteredPassword, this.password);
  };
  

• 登录路由示例：

  app.post('/api/login', async (req, res) => {
    try {
      const { email, password } = req.body;
      const user = await User.findOne({ email });
      if (!user) return res.status(400).json({ error: '用户不存在' });
      
      const isMatch = await user.matchPassword(password);
      if (!isMatch) return res.status(400).json({ error: '密码错误' });
      
      res.status(200).json({ message: '登录成功', user: { id: user._id, name: user.name, email: user.email } });
    } catch (err) {
      res.status(500).json({ error: err.message });
    }
  });
  

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