Flask路由添加尾部斜杠后还原出现404及静态资源路径异常问题

静态资源路径异常成因 #

HTML中的相对路径是基于当前页面的URL层级进行拼接的：

• 当页面路由为@app.route("/reference")时，访问URL是/reference，浏览器将其识别为根目录下的单文件，相对路径static/css/style.css会拼接为/static/css/style.css，匹配Flask默认静态资源路由，加载正常。
• 当路由修改为@app.route("/reference/")时，访问URL是/reference/，浏览器将其识别为reference目录下的默认页面，相对路径static/css/style.css会拼接为/reference/static/css/style.css，该路径不存在对应资源，因此加载失败。

你修改为../static/css/style.css相当于告知浏览器回退一级目录后再查找静态资源，路径恢复为/static/css/style.css，因此加载正常。更通用的解决方案是直接使用根路径绝对写法/static/css/style.css，路径开头的斜杠会强制浏览器从站点根目录开始查找资源，不受当前页面URL层级影响。

改回无尾部斜杠路由后404成因 #

该问题由浏览器的301永久重定向缓存导致：
Flask默认开启唯一URL重定向规则，当路由定义为带尾部斜杠的/reference/时，用户访问不带斜杠的/reference，Flask会返回301永久重定向响应，引导用户访问/reference/。301响应会被浏览器长期本地缓存，后续用户再访问/reference时，浏览器会直接读取缓存跳转到/reference/，不会向服务器发起/reference的请求。
当你把路由改回无尾部斜杠的/reference后，服务器不存在/reference/对应的路由，因此浏览器跳转后的请求会返回404。
解决方法：清除浏览器缓存、使用无痕模式访问，或通过强制刷新（Windows：Ctrl+F5，Mac：Cmd+Shift+R）清除本地重定向缓存即可恢复正常访问。

内容的提问来源于stack exchange，提问作者이상민