Flask Form使用GET提交时URL出现多余字段该如何优化？

多余参数出现原因 #

• 模板中调用{{ barsearchform.hidden_tag() }}会默认渲染CSRF token隐藏字段，GET请求提交时该字段会作为参数带入URL
• 表单提交按钮默认带有name属性，提交时也会将按钮的键值对带入URL
• 表单未指定action属性，默认提交到当前页面路径，所以未匹配到你定义的/search/路由

解决方案 #

方案1（推荐，无额外跳转）

1. 关闭搜索表单的CSRF防护：GET请求的搜索类表单无需CSRF校验，在实例化表单时添加参数关闭CSRF生成即可

# 表单实例化代码位置修改
barsearchform = BarSearchForm(meta={'csrf': False})

2. 修改模板代码：删除hidden_tag()调用，给提交按钮设置空name属性，同时指定表单提交路径为你的搜索路由

<div class="navbar-nav mr-auto">
     <form class="navbar-form navbar-left" role="search" method="GET" action="{{ url_for('articles.bar_search') }}" > 
       <div class="input-group">
         {{ barsearchform.query(class="form-control rounded",placeholder="Search articles") }}
         {{ barsearchform.submit(class="btn btn-outline-primary", name="") }}
       </div>
</form>

修改完成后提交表单，URL格式为http://localhost:5000/search/?query=aaaaaaaa，如果需要跳转到站点根路径带参数，将action属性值改为/即可。

方案2（无需修改表单配置，有额外跳转）

如果需要保留CSRF校验，可以在路由层做重定向处理，收到请求后自动跳转到仅保留query参数的URL：

@articles.route("/search/")
def bar_search():
    if request.method == "GET":
        # 存在多余参数时发起重定向
        if 'csrf_token' in request.args or 'submit' in request.args:
            term = request.args.get('query')
            return redirect(url_for('articles.bar_search', query=term))
        term = request.args.get('query')
        # 原有业务逻辑
        return render_template(...)

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