Flask重定向后无效果前端无跳转无反应问题

在网上搜了一下并没有什么好的解决方案,有的话也只是告诉你如何修改代码,并没有讲明白其中的原理以及导致问题的核心,因此特意去了解了一下HTTP的规范找到了答案

  • 问题说明
    问题出现的流程大致都是前端发送Ajax请求给后端,进行一些查库校验等,这时根据逻辑进行重定向跳转到不同的页面,检查控制台可以显示,确实进行了路由的跳转,且跳转对象的函数内也可以执行相应的代码

可以发现DEBUG打印了302进行了重定向,且也进行了重定向后的路由跳转,但此时去看前端会发现并没有进行路由跳转

问题就出在请求方式这里,我的前端是通过AJAX的POST请求去发的,当我直接在浏览器进行输入路由进行测试时候可以发现重定向成功了(记得先让你的路由先支持GET方式),此时可能导致我误解是POST的原因,搜了相关资料确实说了POST会造成相关原因,但最后解决的核心点在AJAX

  • HTTP规范分析

HTTP/1.1规范规定,对于POST请求的重定向,浏览器的默认行为是不会自动地进行跳转的。这是为了防止用户无意中重复提交表单数据,因为POST请求通常用于提交表单。

在HTTP/1.1规范中,当服务器返回3xx状态码(重定向状态码)时,浏览器应该按照响应头中的Location字段的值进行重定向。然而,在实际应用中,对于POST请求,浏览器通常会将重定向的处理方式留给开发者来决定,而不会自动地执行。

对于GET请求,浏览器通常会遵循规范,自动进行重定向。但由于POST请求包含请求体(Request Body),而GET请求则不包含,因此在POST请求中,浏览器会要求开发者来处理重定向,以确保用户的数据安全。

所以,在处理POST请求的重定向时,开发者需要通过编写前端代码,通过JavaScript等手段来检测重定向,并根据需要手动执行跳转。

  • AJAX分析

使用 Ajax 进行异步请求时,浏览器并不会自动处理服务器端的重定向,因为 Ajax 请求通常用于在不刷新整个页面的情况下获取数据。由于这一点,即使服务器返回了重定向响应,浏览器也会在背后接收重定向,但不会自动更新页面。

所以,如果你希望在 Ajax 请求中进行重定向,你需要在前端代码中手动处理。可以通过在成功回调中手动设置 window.location.href 实现

如果你直接使用 <a> 标签或者表单提交的方式,浏览器会自动处理重定向,但使用 Ajax 时需要手动处理。这是因为 Ajax 的设计初衷是异步获取数据,而不是进行完整的页面导航

  • 总结

解决方案就是要么别用AJAX直接用a标签去做这个事儿,我这里要用Layui的表单去做校验,所以就得到JS层去做这个事。要么用AJAX的话就在前端进行重定向,后端这种前后端不分离的模板开发的方式都不会生效的,因为AJAX不会给你处理的,按照FLASK的处理方式,也是会将这个重定向的结果返回,也就是那个页面,但是因为是AJAX接收的,所以返回的结果会传递到回调函数中,这里你可以去打印一下AJAX的回调,可以发现返回了一个HTML页面的全部代码,也就是FLASK重定向后返回的东西。因此最后我是直接在前端进行重定向,跳转到目标页面,在目标页面渲染前做逻辑处理

  • 直接进行重定向后端
js 复制代码
layui.use(function () {
  let form = layui.form;

     form.on('submit(search)', function (data) {
         let field = data.field;
         window.location.href = '{{ url_for('web.identify')}}' + `?code=${field.code}`;
         return false;
     });
 })
  • 后端路由去处理返回的数据以及HTML
python 复制代码
@bp.route('/identify')
def identify():
    code = request.args.get('code')
    products = SecurityCode.query.filter_by(security_code=code).first()
    products_json = {
        'goods_name': products.goods_name,
        'security_code': products.security_code,
        'queries_num': products.queries_num
    } if products else None
    return render_template('identify.html', **locals())

自己根据情况合理调整即可,还是得多了解HTTP和AJAX的规则- -

相关推荐
知识分享小能手21 分钟前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言38 分钟前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
豌豆花下猫1 小时前
让 Python 代码飙升330倍:从入门到精通的四种性能优化实践
后端·python·ai
夏末蝉未鸣011 小时前
python transformers库笔记(BertForTokenClassification类)
python·自然语言处理·transformer
你的人类朋友2 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手2 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿2 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜053 小时前
react状态管理库 - zustand
前端·react.js·前端框架
weixin_418813873 小时前
Python-可视化学习笔记
笔记·python·学习