使用Fetch API调用Django视图失败求助：请求未抵达后端

我明白你作为Django新手遇到这种请求“消失”的问题有多头疼——明明写了fetch代码，但后端连最基础的打印都没输出，大概率是请求在到达视图之前就被拦截或者路径不匹配了。咱们一步步来排查：

首先确认Django的URL路由配置 #

这是最容易踩坑的点，如果路由没映射对，请求根本找不到你的视图。

打开你的app的urls.py，确认有没有把videocall视图绑定到/videocall/路径：

from django.urls import path
from . import views

urlpatterns = [
    # 确保这一行存在，路径和你fetch的URL一致
    path('videocall/', views.videocall, name='videocall'),
]

另外还要检查项目根目录的urls.py，有没有include这个app的路由：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    # 假设你的app叫myapp，要加上这一行
    path('', include('myapp.urls')),
]

检查Fetch的URL是否正确 #

你用的是相对路径/videocall/，这个路径是相对于当前页面的URL的。比如如果你的页面在http://localhost:8000/，那请求会发送到http://localhost:8000/videocall/，没问题；但如果页面在子路径（比如http://localhost:8000/user/），那相对路径会变成http://localhost:8000/user/videocall/，这就和你的路由不匹配了。

更稳妥的做法是用Django的模板标签生成绝对URL：
在你的HTML模板里添加：

<script>
<!-- 用{% url %}标签自动生成正确的URL，避免路径错误 -->
const videocallUrl = "{% url 'videocall' %}";
</script>

然后前端代码里改成：

fetch(videocallUrl, {
    // 其他配置不变
})

验证CSRF令牌是否正确 #

Django默认会拦截没有正确CSRF令牌的POST请求，这时候请求会被中间件直接拒绝，根本到不了你的视图。

先确认你正确获取了CSRF令牌，官方推荐的写法是：

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');

然后检查请求头里的X-CSRFToken是不是这个值。你可以打开浏览器的开发者工具（F12），切换到Network标签，触发请求后查看请求的Headers，看X-CSRFToken是否存在且正确。

修正请求的Content-Type #

你用了JSON.stringify来发送JSON格式的body，但你的请求头里没加Content-Type: application/json，Django默认不会解析这种格式的请求体，甚至可能因为格式不匹配拒绝请求。

修改你的fetch headers：

headers:{
    'Accept': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRFToken': csrftoken,
    'Content-Type': 'application/json' // 加上这一行
},

对应的，在Django视图里要解析JSON body的话，需要这样写：

import json
from django.http import JsonResponse

def videocall(request):
    print("Trying to login")
    if request.method == "POST":
        print("POST request received!")
        # 解析JSON格式的请求体
        data = json.loads(request.body)
        username = data.get('username')
        # 这里写你的业务逻辑，比如生成Twilio令牌
        return JsonResponse({'token': 'your_token_here', 'conversation_sid': 'your_sid_here'})

用浏览器开发者工具排查细节 #

最后，一定要用浏览器的DevTools来确认请求的状态：

1. 打开F12，切换到Network标签，勾选“Preserve log”
2. 触发你的connect函数，看有没有videocall的请求出现
   • 如果没有请求：说明前端代码可能没执行到fetch，检查控制台（Console标签）有没有语法错误，或者alert是否都弹了（比如alert("vc")之后是不是没走到fetch）
   • 如果有请求：看状态码，如果是403，那就是CSRF的问题；如果是404，就是路由不匹配；如果是200但后端没打印，那可能是视图逻辑的问题（不过你现在连最开始的print都没输出，应该是前面的问题）

按照这些步骤排查，应该能找到问题所在。

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