如何通过Django API获取Angular表单的POST输入值

核心问题：Angular 默认发送的是 Content-Type: application/json 格式的请求体，而 Django 的 request.POST 仅解析 application/x-www-form-urlencoded 或 multipart/form-data 类型的表单数据，JSON 格式的请求数据会被存放在 request.body 中，因此直接用 request.POST['user']/request.POST['pwd'] 无法获取值。

下面提供两种可行的解决方式：

方式一：修改 Angular 请求为表单编码格式 #

调整 Angular 的请求逻辑，把 JSON 数据转换成表单编码格式发送，这样 Django 就能通过 request.POST 正常读取数据。

修改 Angular Service 代码 #

假设你原来的 service 方法是这样的：

login(user: string, pwd: string) {
  return this.http.post('/api/login/', { user, pwd });
}

改成用 HttpParams 构造表单数据，并设置正确的请求头：

import { HttpParams, HttpClient } from '@angular/common/http';

// ... 其他代码
login(user: string, pwd: string) {
  const formData = new HttpParams()
    .set('user', user)
    .set('pwd', pwd);
  
  return this.http.post('/api/login/', formData.toString(), {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  });
}

修改后，Django 端无需改动，直接用 request.POST['user'] 和 request.POST['pwd'] 就能拿到数据。

方式二：在 Django 端解析 JSON 请求体 #

如果不想改动 Angular 代码，直接在 Django 视图里解析 request.body 中的 JSON 数据即可。

修改 Django API 视图代码 #

import json
from django.http import JsonResponse

def login(request):
    if request.method == 'POST':
        try:
            # 解析请求体中的 JSON 数据
            request_data = json.loads(request.body)
            user = request_data.get('user')
            pwd = request_data.get('pwd')
            
            # 这里写你的登录逻辑，比如验证账号密码等
            return JsonResponse({'status': 'success', 'message': '登录成功'})
        except json.JSONDecodeError:
            return JsonResponse({'status': 'error', 'message': '请求格式错误'})

如果你的 Django 版本在 3.1 及以上，可以用更简洁的 request.json 属性直接获取解析后的 JSON 数据：

def login(request):
    if request.method == 'POST':
        request_data = request.json
        user = request_data.get('user')
        pwd = request_data.get('pwd')
        
        # 后续逻辑
        return JsonResponse({'status': 'success'})

额外提醒 #

如果 Angular 和 Django 部署在不同域名下，记得在 Django 中配置跨域支持，推荐使用 django-cors-headers 库来快速配置，避免请求被浏览器拦截。

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