Vue+MongoDB项目中点赞/取消点赞按钮API调用失效求助

以下是你代码中存在的关键问题及对应修复方法：

1. Axios请求参数格式错误 #

你把headers放在了请求体参数位置，Axios的post方法正确格式是axios.post(url, 请求体数据, { headers: ... })，headers属于配置项，而非请求体内容，这会导致后端无法正确读取Authorization头。

2. 未接收回调的response参数 #

then回调里未声明response参数就直接使用，会触发response is not defined的错误。

3. 未正确访问Vue实例数据 #

访问post和user属性时没有加this，Vue组件中必须通过this才能访问data里定义的变量。

4. 用户点赞判断逻辑错误 #

usersLiked是数组类型，不能直接用==和单个用户ID比较，应该用includes方法检查数组中是否包含当前用户ID。

5. 点赞数更新逻辑错误 #

已点赞时应该减少点赞数而非加0；更可靠的方式是直接使用后端返回的更新后数据，避免前端计算与后端数据不一致。

6. 未在请求体中传递userId #

你提到需要发送userId，但当前请求没有把该参数传递给后端。

修复后的likePost方法： #

likePost(id) {
    // 先校验用户ID是否已获取（建议在组件mounted时从localStorage或接口初始化user._id）
    const userId = this.user._id;
    if (!userId) {
        console.error("用户ID未初始化");
        return;
    }

    axios.post(
        `http://127.0.0.1:3000/api/post/like/${id}`,
        { userId }, // 将userId放入请求体发送给后端
        {
            headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`
            }
        }
    )
    .then((response) => {
        console.log("response", response);
        // 直接用后端返回的最新post数据覆盖本地数据，保证前后端一致
        this.post = response.data;
        // 若不需要完整替换，也可单独更新字段：
        // this.post.likes = response.data.likes;
        // this.post.usersLiked = response.data.usersLiked;
    })
    .catch((error) => console.log(error));
}

额外提示： #

• 建议在组件mounted钩子中提前获取当前用户的_id并赋值给this.user._id，避免点赞时用户ID为空。
• 后端处理完点赞请求后，需返回更新后的完整post对象，前端直接替换本地数据即可，无需自行计算点赞数和用户列表，减少逻辑错误。

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