MongoDB+React项目：后端响应无法转发至前端问题求助

核心问题分析 #

1. 后端路由参数解析失败：/:email&:password不符合Express路由规则，&会被当作路径的一部分，导致password参数无法正确获取。
2. 前端请求URL错误：变量引用错误（email.email应为form.email），且URL格式不符合参数传递规范。
3. 响应格式不兼容：后端返回纯文本，前端用response.json()解析会触发错误，中断代码执行。
4. 状态码设置顺序错误：res.send().status()的写法无效，必须先设置状态码再发送响应。

修正方案 #

1. 后端代码（server.js）

推荐使用查询参数传递敏感信息（更安全、符合REST规范）：

const router = express.Router();

// 获取所有记录
router.get("/", async (req, res) => {
  const collection = await db.collection("records");
  const results = await collection.find({}).toArray();
  // 先设置状态码再发送响应
  res.status(207).send(results);
});

// 验证用户（查询参数版）
router.get("/login", async (req, res) => {
  const collection = await db.collection("records");
  const { email, password } = req.query;

  // 校验参数是否存在
  if (!email || !password) {
    return res.status(400).json({ message: "请提供邮箱和密码" });
  }

  const user = await collection.findOne({ email, password });

  if (!user) {
    res.status(404).json({ message: "用户不存在" });
  } else {
    // 返回JSON格式响应，包含用户信息
    res.status(200).json({ message: "用户存在", user });
  }
});

2. 前端代码

对应查询参数的请求写法，同时增加错误捕获：

async function onSubmit(e) {
  e.preventDefault();

  try {
    // 用encodeURIComponent处理特殊字符，避免URL解析错误
    const response = await fetch(
      `http://localhost:5050/login?email=${encodeURIComponent(form.email)}&password=${encodeURIComponent(form.password)}`
    );

    // 统一解析JSON响应
    const data = await response.json();

    if (response.status === 200) {
      alert("用户存在");
      console.log("用户信息：", data.user);
    } else {
      alert(data.message || "未找到用户");
    }
  } catch (err) {
    console.error("请求失败：", err);
    alert("网络异常，请检查后端服务是否启动");
  }
}

额外提示 #

• 密码不要直接放在URL中（无论是路径参数还是查询参数），生产环境建议用POST请求传递敏感信息，并对密码进行哈希存储。
• 始终捕获fetch的异常，避免因网络错误或解析错误导致页面无响应。

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