如何在Django视图处理表单提交后重定向至React页面？

方案一：Django视图返回重定向（适配传统表单提交） #

当前你用@api_view返回Response是API场景的写法，要实现跳转页面，直接修改视图返回重定向响应即可：

修改views.py：

from django.shortcuts import redirect
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(["POST"])
def create_object(request):
    # 你的对象创建逻辑（示例）
    serializer = YourSerializer(data=request.data)
    if serializer.is_valid():
        serializer.save()
        # 重定向到React首页
        return redirect("http://localhost:3000/")
    # 验证失败时可重定向回表单页面或返回错误
    return redirect("http://localhost:3000/booking") # 假设表单所在页面地址

跨域配置注意：因为Django在8000端口、React在3000端口，需要解决跨域问题。安装django-cors-headers库后，在settings.py中配置：

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

方案二：前端AJAX提交表单（推荐，无刷新跳转） #

传统表单提交会刷新页面，用AJAX提交能提升体验，提交成功后前端主动跳转：

修改booking.js的表单处理逻辑：

// 阻止表单默认提交行为
document.querySelector('form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    
    try {
        const response = await fetch('http://127.0.0.1:8000/all/new/', {
            method: 'POST',
            body: formData,
            // 带上CSRF令牌（Django默认开启CSRF保护）
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        });
        
        if (response.ok) {
            // 提交成功后跳转React首页
            window.location.href = 'http://localhost:3000/';
        } else {
            alert('创建失败，请重试');
        }
    } catch (error) {
        console.error('请求出错:', error);
        alert('请求失败，请检查网络');
    }
});

// 辅助函数：获取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;
}

这种方式下，Django视图可保留原有的return Response(serializer.data)，前端只需判断请求状态即可。同样需要配置方案一中的跨域规则。

补充提示 #

• DRF的@api_view支持返回redirect，会自动转换为标准HTTP重定向响应。
• 若使用传统Django模板渲染表单，可在表单内添加{% csrf_token %}标签自动携带CSRF令牌，无需手动处理。

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