使用Fetch API调用Django View无响应，请求排查URL及配置问题

Hey there! Let's walk through the most likely reasons your fetch request isn't hitting the videocall view, and how to fix them step by step.

1. Double-Check Your Django URL Configuration #

Since you suspect the URL might be the issue, this is the first place to look. Django won't route requests to your view unless the URL patterns are set up correctly.

Project Root urls.py #

Make sure you've included your app's URLs in the project's root urls.py:

from django.urls import include, path

urlpatterns = [
    # ... other existing paths (like admin/)
    path('', include('your_app_name.urls')),  # Replace 'your_app_name' with your actual app name
]

App-Specific urls.py #

Then, in your app's urls.py, confirm the path maps exactly to your videocall view:

from django.urls import path
from . import views

urlpatterns = [
    # The path here must match the "/videocall/" in your fetch request
    path('videocall/', views.videocall, name='videocall'),
]

• Pay attention to trailing slashes: Django's default behavior redirects requests without a trailing slash, but fetch might not follow that redirect automatically. Ensure both the fetch URL and the URL pattern use the same format (either both with a trailing slash or both without).

2. Validate CSRF Token Handling #

Django blocks POST requests without a valid CSRF token, which would prevent your request from reaching the view. Let's make sure your csrftoken variable is correctly populated:

Add this helper function to your JavaScript to properly retrieve the CSRF token from cookies:

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');

If the csrftoken variable was undefined before, this would cause a 403 Forbidden error, and your request would never reach the view's print statements.

3. Fix Request Content-Type Header #

You're sending JSON data via JSON.stringify, but your fetch request is missing the Content-Type: application/json header. Django won't automatically parse JSON payloads without this header, and in some cases, this can cause the request to be rejected before reaching your view.

Update your fetch headers to include it:

headers:{
    'Accept': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRFToken': csrftoken,
    'Content-Type': 'application/json',  // Add this line!
},

Then, in your Django view, you'll need to parse the JSON data correctly (since request.POST only handles form-encoded data):

import json
from django.http import JsonResponse

def videocall(request):
    print("Trying to login")
    if request.method == "POST":
        print("POST request received!")
        # Parse the JSON payload
        data = json.loads(request.body)
        username = data.get('username')
        # Add your Twilio token logic here
        return JsonResponse({'token': 'your_twilio_token', 'conversation_sid': 'your_sid'})

4. Use Browser DevTools to Diagnose the Request #

Open your browser's Developer Tools (F12) and go to the Network tab. Trigger your connect function, then look for the videocall request:

• If you see a 404 Status Code: Your URL routing is incorrect (go back to step 1).
• If you see a 403 Status Code: Your CSRF token is invalid or missing (step 2).
• If you see a 200 Status Code but no print output: Double-check that your view is correctly linked in urls.py (no typos in the function name).

5. Check for Typos #

It sounds silly, but typos happen! Make sure:

• The view function name in views.py is exactly videocall (no underscores or misspellings).
• The path in urls.py matches the fetch URL exactly (case-sensitive!).

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