为Django登录页添加CSS后登录功能失效的问题排查

问题背景 #

我有一个基于PostgreSQL的Django网站，原本登录功能正常，为优化样式修改了登录页面和_base.html的布局代码，但未改动表单核心逻辑，登录功能却失效了。提交登录表单后，URL变成了包含登录参数的GET请求格式，无法跳转到首页。

原登录页面代码 #

{% extends "_base.html" %}
{% load crispy_forms_tags %}
{% block title %}Log In{% endblock title %}
{% block content %}
<h2>Log In</h2>
<div class="container text-center">
    <div class="row justify-content-center">
        <div class="col-4">
            <form method="post">
                {% csrf_token %}
                {{ form | crispy }}
                <button class="btn btn-primary " type="submit">Log In</button>
            </form>
        </div>
    </div>
</div>
{% endblock content %}

原_base.html代码片段 #

<!-- additional css content for navbar -->
<div class="container-fluid full-height p-0">
    {% block content %}
    {% endblock content %}
<!-- similar footer content -->

修改后的登录页面代码 #

{% extends "_base.html" %}
{% load crispy_forms_tags %}
{% block title %}Log In{% endblock title %}
{% block content %}
<div class="bg-dark vh-100 d-flex align-items-center justify-content-center">
    <div class="col-3 p-5 border bg-light rounded-2">
        <h2>Log In</h2>
        <form method=" post">
            {% csrf_token %}
            {{ form | crispy }}
            <button class="btn btn-primary " type="submit">Log In</button>
        </form>
    </div>
</div>
{% endblock content %}

修改后的_base.html代码片段 #

<div class="container-fluid p-0">
    {% block content %}
    {% endblock content %}
</div>

提交后URL示例：

http://localhost:8000/accounts/login/?csrfmiddlewaretoken=XgEmrXg1fMJfOoPSnDyuY733MrWTxjaAWHnCnej9sFI6buue93sMgggrwIsTOibd&login=adminsav%40email.com&password=testpass123

问题原因 #

问题出在修改后的登录页面表单标签上：<form method=" post"> 中，post前面多了一个空格。部分浏览器会将带前导空格的属性值识别为无效HTTP方法，自动 fallback 到默认的GET方法。

Django内置登录视图(django.contrib.auth.views.LoginView)仅接受POST请求处理登录逻辑，当表单以GET方式提交时，视图只会重新渲染登录页面，不会执行登录验证，因此登录功能失效，所有表单参数被附加到URL中。

解决方案 #

将表单标签中的method属性值修正为无空格的post：

<form method="post">

修改后，表单会以POST方式提交数据，Django登录视图会正常处理验证逻辑，验证通过后跳转至预设的首页。

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