使用JS+MongoDB开发登录页时出现Cannot POST /错误如何解决？

1. 修复MongoDB连接配置错误 #

你当前的mongoose.connect参数写法错误，配置项应该合并为一个对象，同时存在拼写错误：

• 原写法同时传递了两个独立的配置对象，不符合mongoose参数要求
• 拼写错误：userNewUrlParser应为useNewUrlParser

修复后代码：

mongoose.connect("mongodb+srv://cs196:cs196@userdata.sn7wv.mongodb.net/cs196", { 
  useNewUrlParser: true,
  useUnifiedTopology: true 
});

建议补充连接状态监听回调，方便定位数据库连接问题：

mongoose.connection.on('connected', () => console.log('MongoDB连接成功'));
mongoose.connection.on('error', err => console.log('MongoDB连接失败：', err));

2. 修复POST路由无响应问题 #

你当前的POST路由在执行newNote.save()后没有给客户端返回任何响应，会导致请求超时甚至报错。且save是异步操作，建议用async/await处理异步逻辑：
修复后代码：

app.post("/", async function(req, res) {
  try {
    let newNote = new Note({
        username: req.body.username,
        email: req.body.email,
        password: req.body.password,
        confirm_password: req.body.confirm_password
    });
    await newNote.save();
    // 保存成功后重定向回首页，也可根据需求返回自定义提示
    res.redirect('/');
  } catch (err) {
    console.log('保存数据失败：', err);
    res.status(500).send('保存数据失败');
  }
})

3. 排查前端表单提交异常 #

你给form标签添加了form--hidden类，要确认这个类仅做样式隐藏，没有关联阻止表单提交的JS逻辑。如果页面有配套的表单切换JS，要确认提交时没有被拦截默认提交行为。

4. 确认服务已重启 #

修改服务端代码后必须重启Express服务，新的路由配置才会生效，未重启服务会导致新写的POST路由不被识别，直接返回cannot POST /报错。

额外优化建议 #

• 不要明文存储用户密码，后续务必使用bcrypt等加密库对密码做哈希处理后再入库
• 补充表单校验逻辑，校验两次输入密码是否一致、邮箱格式是否合法
• 新版本Express已内置body-parser能力，可直接用app.use(express.urlencoded({extended: true}))代替单独引入body-parser包，效果完全一致

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