Android设备访问Django站点POST请求失败问题求助

1. 优先查看手机端浏览器报错信息 #

按钮无响应大概率是前端JS执行失败或后端返回错误，先开启手机浏览器的开发者工具：

• Android Chrome：开启开发者模式后，进入浏览器设置 -> 开发者工具，或使用电脑端Chrome输入chrome://inspect连接手机进行远程调试
• 重点查看控制台的错误日志，尤其是403（CSRF验证失败）、500（服务器内部错误）或JS执行报错，这是定位问题的核心线索

2. 修正settings.py中的中间件错误 #

你的MIDDLEWARE列表重复添加了django.middleware.common.CommonMiddleware，中间件顺序直接影响请求处理逻辑，必须删除重复项：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',  # 仅保留这一行
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    # 删除下面这行重复的CommonMiddleware
    # 'django.middleware.common.CommonMiddleware',
]

3. 确认CSRF Token的正确传递 #

表单提交场景 #

确保HTML表单中包含Django的CSRF模板标签，缺失会直接导致POST请求被拦截：

<form method="POST" action="/your-submit-path/">
    {% csrf_token %}
    <!-- 其他表单字段 -->
    <button type="submit">提交</button>
</form>

AJAX提交场景 #

如果通过JS发送POST请求，必须在请求头中携带X-CSRFToken，示例代码：

// 从表单中获取token
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
fetch('/your-submit-path/', {
    method: 'POST',
    headers: {
        'X-CSRFToken': csrftoken,
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new FormData(document.querySelector('form'))
});

也可以从cookie中读取token（需确保cookie可正常访问）：

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

4. 验证CSRF与CORS配置细节 #

• CSRF_TRUSTED_ORIGINS：你的配置已包含http://192.168.16.130:8000，符合要求，但需确保手机访问时的地址完全匹配（比如不要混用HTTP/HTTPS）
• ALLOWED_HOSTS：可移除0.0.0.0，它不匹配手机请求的Host头（实际请求Host为192.168.16.130:8000），保留['192.168.16.130', '127.0.0.1', 'localhost']即可
• CORS配置：当前CORS_ALLOWED_ORIGINS已覆盖手机访问的源，测试阶段可临时开启CORS_ALLOW_ALL_ORIGINS = True排除CORS问题（生产环境禁用）

5. 模拟POST请求验证后端逻辑 #

在电脑上用curl模拟手机请求，验证后端是否正常响应：

# 替换your-token-value为从本地页面获取的CSRF token，your-post-endpoint为实际接口路径
curl -X POST http://192.168.16.130:8000/your-post-endpoint \
  -H "X-CSRFToken: your-token-value" \
  -H "Origin: http://192.168.16.130:8000" \
  -d "key1=value1&key2=value2"

• 返回403：CSRF验证失败
• 返回500：后端代码逻辑错误
• 返回200但前端无响应：前端JS处理逻辑问题

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