安装django-hosts后AJAX POST请求失效，表单验证与数据存储异常

问题概述 #

搭建电商网站时，使用django-hosts配置主站www.shop.com、卖家子站sell.shop.com，迁移后AJAX POST请求异常：点击注册按钮（字段为空时也一样）返回200状态码，但表单验证逻辑未触发，数据无法存入数据库，怀疑跨域相关。

问题根源分析 #

1. AJAX数据传递格式错误：原JS代码将序列化后的表单数据包裹在对象中传递，导致后端无法直接从request.POST获取字段，表单验证直接失败，视图返回页面而非JSON响应。
2. 视图POST逻辑不完善：表单验证失败时未返回JSON错误，而是渲染页面，AJAX拿到HTML后无法识别错误状态。
3. 冗余的手动验证：form.is_valid()已完成基础字段验证，后续手动判断字段长度属于重复操作，且逻辑位置错误（在is_valid()之后，此时cleaned_data已确保字段合法）。

修复方案 #

1. 修正AJAX数据传递方式 #

原JS代码错误地将serializedData作为键值对传递，改为直接传递序列化后的表单数据（表单已包含CSRF Token）：

// 替换原AJAX的data部分
$.ajax({
    url: $('#vendorRegForm1').data('url'),
    data: serializedData, // 直接传递序列化后的表单数据
    type: 'post',
    success: function(resp){
        // 原逻辑保持不变
    }
})

2. 完善视图POST处理逻辑 #

优化表单验证流程，失败时返回JSON错误，移除冗余验证：

from django.http import JsonResponse
from django.contrib.auth.models import User
from .forms import RegisterVendorForm

def createVendorAccount(request):
    if request.method == "POST":
        password2 = request.POST.get('password2')
        form = RegisterVendorForm(request.POST)

        # 先处理密码确认的独立验证
        if not password2:
            return JsonResponse({'status':'PASSWORD2 MISSING'}, safe=False)
        if form.data.get('password') != password2:
            return JsonResponse({'status':'PASSWORDS DO NOT MATCH'}, safe=False)
            
        if form.is_valid():
            email = form.cleaned_data['email']
            # 检查邮箱唯一性
            if User.objects.filter(email=email).exists():
                return JsonResponse({'status': 'EMAIL ALREADY EXISTS'}, safe=False)
                
            # 保存卖家账号
            form1 = form.save(commit=False)
            form1.is_supplier = True
            form1.is_active = True
            form1.save()

            # 生成子域名下的验证页面URL
            success_url = f"http://sell.shop.com:8009/register/verify/"
            return JsonResponse({'status':'OK', 'success_url': success_url}, safe=False)
        else:
            # 映射表单验证错误到前端识别的状态码
            error_map = {
                'first_name': 'FIRST NAME MISSING',
                'last_name': 'LAST NAME MISSING',
                'email': 'EMAIL MISSING' if 'required' in str(form.errors['email']) else 'EMAIL ALREADY EXISTS',
                'password': 'PASSWORD LENGTH' if 'minimum length' in str(form.errors['password']) else 'PASSWORD MISSING'
            }
            for field, status in error_map.items():
                if field in form.errors:
                    return JsonResponse({'status': status}, safe=False)
            # 默认错误
            return JsonResponse({'status': 'INVALID FORM'}, safe=False)

    form = RegisterVendorForm()
    return render(request, 'vendors/registration/create_account.html')

3. 修正表单的data-url为绝对子域名URL #

使用{% host_url %}生成子域名下的绝对URL，避免跨域路径问题：

<form id="vendorRegForm1" action="{% host_url 'create_vendor_account' host 'sell' %}" method="POST" data-url="{% host_url 'create_vendor_account' host 'sell' %}">
    {% csrf_token %}
    <!-- 表单字段保持不变 -->
</form>

4. 优化CORS配置（可选） #

确保CORS配置包含所有子域名，允许携带凭证（若需要）：

# settings.py
CORS_ALLOWED_ORIGINS = [
    "http://www.shop.com:8009",
    "http://sell.shop.com:8009"
]
CORS_ALLOW_CREDENTIALS = True  # 允许跨域携带Cookie

验证效果 #

修复后，点击注册按钮时：

• 字段为空时会返回对应错误状态码，前端弹出toastr提示
• 表单验证通过后，数据正常存入数据库并跳转至验证页面
• 跨域请求（若存在）会被CORS配置正确允许

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