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的规则- -

相关推荐
进击的明明8 小时前
TypeScript速通笔记(上)
前端·面试·typescript
deli0078 小时前
萤火虫为什么会一起闪:调一个耦合系数,整片林子自己同步
前端
柒和远方8 小时前
DocResearch 项目面试:把每个模块讲明白,而不是背术语
python·llm·agent
信誓旦旦的程序猿8 小时前
【Python 量化取数指南 #13】Python 把行情落库:sqlite 一键存,回测随用随取
java·python·股票数据api·股票数据·股票数据api接口·股票api数据接口·股票量化数据api
计算机魔术师8 小时前
英伟达联合超100家伙伴推出开放代理安全平台
前端
看谷秀8 小时前
arkts-12 鸿蒙生态/卡片
前端·arkts
朱 欢 庆8 小时前
el-table-v2 虚拟表格组件
前端·javascript·vue.js
LensonYuan8 小时前
Cursor状态栏一键切换OpenAI API Key
人工智能·python·cursor
柒和远方8 小时前
DocResearch 项目理解:从一条命令到一份有出处的报告
python·llm·agent
北冥有鱼被烹8 小时前
NVIDIA DGX/HGX 服务器全景深度解析:从 H100 到 GB300,专业算力选型必读
运维·服务器·网络·python