Django+JS动态点赞按钮出现404错误，求排查方向

一、404错误的核心原因及修复 #

你的404错误主要是fetch请求未传递必要POST数据，加上视图逻辑的小问题导致的，具体修复步骤如下：

1. 修复JavaScript的fetch请求，传递文章ID #

当前fetch只发了请求头，没带POST数据，而视图里在尝试获取article_id，直接导致get_object_or_404找不到数据触发404。修改likePost函数：

const likePost = async (postId, csrfToken) => {
    await fetch(`/like/${postId}/`, {
      method: 'POST',
      credentials: 'include',
      headers: {
        "X-CSRFToken": csrfToken,
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body: `article_id=${postId}`
    });
    reloadPostHTML(postId);
};

2. 优化视图函数，必须加POST请求判断 #

视图里已经通过URL捕获了pk，没必要再从POST里取article_id，同时一定要加request.method == "POST"判断，防止GET请求非法访问：

from django.http import HttpResponseBadRequest

def like(request, pk):
    if request.method != "POST":
        return HttpResponseBadRequest("仅支持POST请求")
    
    article = get_object_or_404(Article, id=pk)
    if article.likes.filter(id=request.user.id).exists():
        article.likes.remove(request.user)
        liked = False
    else:
        article.likes.add(request.user)
        liked = True
    return HttpResponseRedirect(reverse("article_detail", args=[int(pk)]))

3. 统一URL的斜杠格式 #

Django默认开启APPEND_SLASH，如果URL配置不带斜杠，请求会被重定向，但fetch默认不跟随重定向，所以把urls里的路径改成带斜杠的：

path('like/<int:pk>/', views.like, name='like'),

二、其他潜在问题修复 #

1. 解决模板按钮ID重复问题 #

模板里给点赞按钮设置了id="like"，多文章页面会出现重复ID，违反HTML规范，建议去掉这个ID，或者改成动态ID：

<button class="btn btn-danger position-relative" type="submit" id="like-{{ article.pk }}" name="article_id" value="{{article.id}}">

2. 优化事件绑定逻辑 #

原来的循环绑定事件，刷新后还要重新绑定，换成事件委托更省心：

// 替换原来的makeLikeButtons和makeLikeButton函数
document.addEventListener("click", (event) => {
    const button = event.target.closest(".like-button-wrapper button");
    if (!button) return;
    event.preventDefault();
    const wrapper = button.closest(".like-button-wrapper");
    const postId = wrapper.dataset.postId;
    const csrfToken = wrapper.dataset.csrfToken;
    likePost(postId, csrfToken);
});

这样不用每次刷新后手动重新绑定事件。

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