React Axios添加收藏电影时POST请求500错误的修复方案

核心排查点及修复方案 #

1. Passport认证策略缺失 #

你的API路由中使用passport.authenticate({session: false})但未指定具体认证策略（如JWT），导致Passport无法正确验证Bearer Token，进而引发后续逻辑错误。
修复代码：

// 修改API的POST路由，补充JWT策略名称
app.post('/users/:Username/movies/:MovieID',
  passport.authenticate('jwt', { session: false }),
  (req, res) => {
    // 原有业务逻辑保持不变
  });

2. MongoDB字段类型不匹配 #

若Users集合的FavoriteMovies字段定义为ObjectId数组，但前端传入的movie._id是字符串格式，MongoDB会抛出类型错误，返回500状态码。
修复方案二选一：

• 方案一：在API层转换ID类型

const mongoose = require('mongoose');

// 在findOneAndUpdate前添加转换逻辑
const movieId = mongoose.Types.ObjectId(req.params.MovieID);

// 更新$push的参数
{ $push: { FavoriteMovies: movieId } }

• 方案二：确保前端传递的movie._id为MongoDB原生ObjectId（若前端从API获取电影数据，需保留_id的原始类型）

3. Axios请求体优化 #

当前Axios POST请求传递了空对象{}作为请求体，虽不直接引发错误，但可优化为null（明确表示无请求体）：

axios.post(
  `https://mymoviesapi2023.herokuapp.com/users/${username}/movies/${movie._id}`, 
  null, // 替换原空对象
  { headers: { Authorization: `Bearer ${token}` } }
)

4. 错误日志细化 #

API当前的错误返回信息过于简略，不利于定位问题，可修改为返回详细错误详情：

if (err) {
  console.error(err);
  res.status(500).json({ 
    errorMessage: err.message,
    errorStack: err.stack 
  });
}

修改后前端控制台能直接看到具体错误原因（如认证失败、数据库操作异常等）。

5. 用户名一致性校验 #

确认localStorage.getItem("user")获取的用户名与req.user.Username完全一致（注意大小写、空格等细节），避免因权限校验逻辑间接引发异常。

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