MERN应用中Axios DELETE请求报404，Postman可正常删除评论

你遇到的这个404问题其实是Axios DELETE请求的参数传递方式不对导致的！Postman里你是直接把photoId和commentId放在请求体里发送的，但Axios的delete方法和post不一样——它的第二个参数不是请求体数据，而是配置对象，直接传data的话，后端根本接收不到req.body里的参数，自然查不到对应照片，返回404。

解决方案一：修正前端Axios请求写法 #

把你的前端请求代码改成这样，把数据放在配置对象的data字段中：

import axios from "axios";
export const deletePhotoComment = data => {
  // 注意第二个参数是config对象，data放在里面
  return axios.delete("/api/photos/comment/delete", { data }); 
};

这样Axios才会把photoId和commentId放到请求体里，后端就能通过req.body拿到这两个参数了。

补充优化建议 #

另外，你的后端代码还有两个小问题可以优化：

• 要判断photo是否真的被查到了，避免photo.comments报错
• photo.save()是异步操作，要加return或者用await，不然可能还没保存就返回响应了

修改后的后端代码：

// DELETE COMMENT (protected)
router.delete(
  "/comment/delete",
  passport.authenticate("jwt", { session: false }),
  async (req, res) => {
    try {
      const { commentId, photoId } = req.body;
      const photo = await Photo.findOne({ _id: photoId });
      
      if (!photo) {
        return res.status(404).json({ nophotofound: "No photo found" });
      }

      photo.comments.pull({ _id: commentId });
      await photo.save();
      res.json(photo.comments);
    } catch (err) {
      res.status(404).json({ nophotofound: "No photo found" });
    }
  }
);

备选方案：用URL查询参数传递ID #

如果你不想改Axios的写法，也可以把photoId和commentId放在URL的查询字符串里：

前端代码：

export const deletePhotoComment = ({photoId, commentId}) => {
  return axios.delete(`/api/photos/comment/delete?photoId=${photoId}&commentId=${commentId}`);
};

后端代码对应改成从req.query获取参数：

const { commentId, photoId } = req.query;

这样也能解决参数接收不到的问题，看你个人习惯选择哪种方式~

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