发布功能无控制台日志且无法写入MongoDB问题求助

前端组件（uploadPost.vue）排查 #

• 检查表单提交事件：确认表单@submit或点击事件是否正确绑定处理函数，比如是否添加.prevent阻止默认页面跳转（@submit.prevent="handleSubmit"），避免跳转中断请求。
• 验证表单数据收集：在提交函数开头添加console.log(formData)，确认是否正确获取所有字段（宠物名称、类型、描述等），检查字段名是否和后端要求一致。
• 排查请求发送逻辑：
  • 确认请求方法（POST/PUT）与后端路由匹配。
  • 检查请求URL是否正确（如http://localhost:3000/api/posts），查看浏览器Network标签，确认OPTIONS预检请求是否成功（排查跨域问题）。
  • 检查请求头：若后端需要身份验证，确认是否携带登录token；根据数据类型设置正确的Content-Type（如multipart/form-data或application/json）。
  • 给请求添加错误捕获，避免静默失败：

    axios.post('/api/posts', formData)
      .then(res => console.log('请求响应:', res))
      .catch(err => console.error('请求错误:', err))
    

• 检查Pinia Store调用：确认组件是否正确dispatch对应action，Store内的请求逻辑是否符合上述检查点。

后端路由排查 #

• 确认POST路由配置正确，比如router.post('/posts', uploadPostController)，路径、请求方法无拼写错误。
• 检查路由是否挂载到主路由（如app.use('/api', postRouter)），确保前端请求URL与后端路由完全匹配。

控制器（uploadPostController）排查 #

• 在控制器函数开头添加console.log(req.body)或console.log(req.file)（若含文件上传），确认后端是否接收到前端数据。
• 检查数据校验逻辑：是否存在必填字段校验不通过，导致后续入库逻辑被跳过。
• 排查数据库写入代码：确认是否正确使用await调用模型的create方法（如await PostModel.create(req.body)），避免异步操作未执行完成就返回。
• 给数据库操作添加错误捕获，输出具体报错：

  try {
    const newPost = await PostModel.create(postData);
    console.log('入库成功:', newPost);
    res.status(201).json(newPost);
  } catch (err) {
    console.error('入库错误:', err);
    res.status(500).json({ message: '创建帖子失败' });
  }
  

模型（PostModel）排查 #

• 确认模型字段定义与前端传入字段匹配，比如前端传petName，模型需对应petName: { type: String, required: true }，避免字段名拼写错误。
• 检查数据库连接状态：查看后端启动日志，确认MongoDB连接成功提示。

跨域与端口排查 #

• 确认后端配置CORS允许前端端口请求：

  const cors = require('cors');
  app.use(cors({ origin: 'http://localhost:5173', credentials: true }));
  

• 检查前后端端口：确认后端在localhost:3000正常运行，前端请求目标端口无误。

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