本文介绍如何通过自定义 Flask 的静态文件路由并设置 Cache-Control 响应头，使浏览器缓存图片等静态资源，避免每次页面刷新重复加载，提升前端性能。无需额外前端代码或 Web 服务器配置。
本文介绍如何通过自定义 flask 的静态文件路由并设置 `cache-control` 响应头，使浏览器缓存图片等静态资源，避免每次页面刷新重复加载，提升前端性能。无需额外前端代码或 web 服务器配置。
在 Flask 默认配置下，静态文件（如 /static/images/logo.png）由内置的 send_static_file 处理，但其响应头通常不包含强缓存策略（例如默认可能为 Cache-Control: no-cache 或无显式声明），导致浏览器每次请求都向服务器验证资源是否更新，无法有效利用本地缓存。
解决方法是接管静态文件路由，手动控制响应头。以下是一个简洁、可靠且兼容 Flask 最新版（2.x/3.x）的实现：
from flask import Flask, make_response, send_from_directory
app = Flask(__name__, static_folder=None) # 禁用默认静态文件处理
@app.route('/static/<filename>')
def static(filename):
response = make_response(send_from_directory('static', filename))
# 设置强缓存：例如缓存 1 小时（3600 秒）
response.headers['Cache-Control'] = 'public, max-age=3600'
return response</filename>
✅ 关键说明：
FastAPI Flask Proxy
下载
FastAPI + Flask 混合部署最佳实践，解决路由定义、API 代理等常见问题，适用于同时运行 FastAPI API 与 Flask 前端的场景。
- static_folder=None 是必需步骤，否则 Flask 会优先使用内置静态路由，覆盖你的自定义逻辑；
- send_from_directory('static', filename) 安全地提供文件（自动防止路径遍历攻击）；
- Cache-Control: public, max-age=3600 表示该资源可被浏览器和中间代理缓存 1 小时；你可根据需要调整 max-age（单位：秒），例如 86400（1 天）适用于长期不变的图片；
- 若需区分资源类型（如仅对 .png, .jpg 启用长缓存），可在视图中添加 filename.lower().endswith(('.png', '.jpg', '.jpeg', '.webp')) 判断逻辑。
⚠️ 注意事项：
- 部署到生产环境时，强烈建议将静态资源交由 Nginx / CDN 托管，它们对缓存策略支持更完善、性能更高；Flask 自定义路由适合开发或轻量场景；
- 修改缓存策略后，已访问过的用户可能仍使用旧缓存，可通过版本化 URL（如 /static/logo.png?v=2.1）或构建时重命名文件（如 logo.a1b2c3.png）实现缓存失效；
- 不要对 favicon.ico 或调试用临时资源设置过长缓存，以免开发时难以刷新。
通过这一小段代码，你无需引入 JavaScript 缓存（如 localStorage）、修改反向代理配置，也无需依赖 Apache 的 .htaccess，即可让浏览器智能复用图片资源——真正做到了“零侵入、高可控、符合 HTTP 标准”的缓存优化。
