Django地理编码应用报400错误：无法获取提交的地址参数

前端通过fetch发送的是JSON格式的请求体（Content-Type: application/json），但Django的request.POST仅用于解析表单编码（application/x-www-form-urlencoded或multipart/form-data）的数据。JSON格式的请求体不会被解析到request.POST中，因此request.POST.get('address','')始终返回空字符串，触发Address not provided的400错误。

有两种可行的修复方式，根据需求选择：

方式一：修改后端，解析JSON请求体 #

直接从request.body读取并解析JSON数据，替换原有的request.POST逻辑：

import json
from django.shortcuts import render
from geopy.geocoders import Nominatim
from django.http import JsonResponse

def single_address(request):
    if request.method == 'POST':
        try:
            # 解析JSON格式的请求体
            data = json.loads(request.body)
            address = data.get('address', '')
        except json.JSONDecodeError:
            return JsonResponse({'error': 'Invalid JSON data'}, status=400)
        
        if address:
            geolocator = Nominatim(user_agent="my_geocoder")
            try:
                location = geolocator.geocode(address)
                if location:
                    return JsonResponse({
                        'latitude': location.latitude, 
                        'longitude': location.longitude
                    })
                else:
                    return JsonResponse({'error': 'Geocoding failed for the address'}, status=500)
            except Exception as e:
                return JsonResponse({'error': f'Error: {str(e)}'}, status=500)
        else:
            return JsonResponse({'error': 'Address not provided'}, status=400)
    else:
        return render(request, 'address/single_address.html')

方式二：修改前端，发送表单编码数据 #

保持后端代码不变，将前端的请求格式改为表单编码，让request.POST能正确解析参数：

document.getElementById('addressForm').addEventListener('submit', function(event) {
    event.preventDefault();
    var address = document.getElementById('address').value;

    // 使用FormData构造表单数据
    const formData = new FormData();
    formData.append('address', address);

    fetch("{% url 'single_address' %}", {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}'
            // 无需手动设置Content-Type，浏览器会自动添加正确的表单编码头
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('response').innerText = JSON.stringify(data, null, 2);
    })
    .catch(error => console.error('Error:', error));
});

• 若需要前后端保持JSON格式交互（更符合现代API规范），优先选方式一。
• 若希望最小化修改，保留原有后端逻辑，选方式二。

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