CS50 Network项目fetch请求返回HTML而非JSON问题求助

1. 路由匹配顺序错误（返回HTML的直接原因） #

Django路由是按照从上到下的顺序逐一匹配的，你当前把动态参数路由path("<str:poster>", views.profile, name="profile")放在了固定路由path("profile_posts", views.profile_posts, name="profile_posts")前面，当你请求/profile_posts时，Django会把字符串profile_posts当做poster参数，直接匹配到profile视图返回HTML内容，不会走到后面的profile_posts路由。

修复方法：调整路由顺序，把固定路由放在动态参数路由前面，修改后的urls.py如下：

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("login", views.login_view, name="login"),
    path("logout", views.logout_view, name="logout"),
    path("register", views.register, name="register"),
    path("all_posts", views.all_posts, name="all_posts"),
    # 固定路由放前面优先匹配
    path("profile_posts/<str:poster>", views.profile_posts, name="profile_posts"),
    # 动态参数路由放最后
    path("<str:poster>", views.profile, name="profile")
]

2. 请求参数和视图逻辑错误 #

• profile_posts视图要求传入poster参数来查询对应用户的帖子，你当前的fetch请求没有传递该参数，需要把查询的用户名拼接到请求路径中
• 视图中Post.objects.get(poster=poster)写法错误，get()只能返回单条数据，查询多条符合条件的帖子需要用filter()

修复方法：

1. 修改profile.js中的fetch请求，把当前页面对应的博主用户名拼接到路径中（可从页面路径或者模板变量中获取用户名，示例中假设用户名存储在currentPoster变量中）

function load_posts_profile() {
    console.log("load_posts_profile running");
    document.querySelector('#prof-posts').style.display = 'block';
    // 拼接用户名到请求路径
    fetch(`/profile_posts/${currentPoster}`)
    .then(response => response.json())
    .then(posts => {
        console.log(posts);
        posts.forEach(post => show_posts_profile(post));
    });
}

2. 修改views.py中的profile_posts视图逻辑：

def profile_posts(request, poster):
    # 将get改为filter查询多条帖子
    posts = Post.objects.filter(poster=poster)
    posts = posts.order_by("-timestamp").all()
    return JsonResponse([post.serialize() for post in posts], safe=False)

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