Flask动态token路由重置密码页CSS样式加载异常

自定义样式加载失效是相对路径解析错误导致的：

• 正常渲染的密码重置申请页路由为/reset_password，属于根路径下的一级路由，你硬编码的相对路径static/css/request_passsword.css会被浏览器解析为/static/css/request_passsword.css，可以正确请求到静态文件。
• 带动态token的密码重置页路由为/reset_password/<token>，属于二级嵌套路由，相同的相对路径会被浏览器解析为/reset_password/static/css/request_passsword.css，该路径下不存在对应CSS文件，请求返回404，自定义样式完全丢失。
• base.html中引入的Bootstrap、Font Awesome使用的是绝对路径CDN资源，因此这部分样式不受影响，和你观察到的异常表现完全匹配。

Flask项目中禁止硬编码static开头的相对路径引用静态资源，否则所有嵌套路由下的静态资源都会出现同类加载失败问题。

使用Flask内置的url_for函数生成静态文件的绝对路径，彻底规避不同路由层级下的路径解析错误：

• 修改main.py中的CSS路径配置，替换硬编码的相对路径：

from flask import url_for

css_file = url_for('static', filename='css/main.css')
css_file_authorization = url_for('static', filename='css/login_form.css')
css_file_reset_password_request_page = url_for('static', filename='css/request_passsword.css')

• 建议同步修复base.html中所有硬编码的相对跳转路径，避免后续出现同类问题：将站内所有写死的href="/xxx"格式的跳转地址，统一替换为href="{{ url_for('对应视图函数名') }}"格式，所有静态资源引用全部走url_for('static', filename='资源路径')生成地址。
• 补充密码重置成功后的跳转逻辑，避免表单重复提交，修改对应视图函数的提交校验部分：

if form.validate_on_submit():
    hash_password = generate_password_hash(form.password.data)
    user.password = hash_password
    db.session.commit()
    flash('密码重置成功，请使用新密码登录', category='success')
    return redirect(url_for('login'))

修改完成后清除浏览器缓存，重新访问带token的密码重置页，打开浏览器开发者工具的网络面板，查看自定义CSS的请求地址是否为/static/css/request_passsword.css、状态码为200，即可确认修复生效。

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