FastApi(uvicorn)项目static目录JS文件修改后浏览器仍加载旧版本如何解决

你遇到的问题核心是静态资源缓存策略导致，即使手动清理浏览器缓存也可能因服务端、代理层缓存未失效导致问题，可按以下方案处理： #

开发环境临时解决 #

修改静态目录挂载代码，给StaticFiles配置禁用缓存的响应头：

app.mount(
    "/static",
    StaticFiles(
        directory="static",
        cache_control="no-cache, no-store, must-revalidate, max-age=0"
    ),
    name="static"
)

修改后重启uvicorn服务即可，该配置仅推荐开发环境使用，生产环境禁用缓存会大幅降低资源加载性能。 #

生产环境永久解决方案 #

生产环境建议使用资源指纹方案，既保留缓存提升性能，又能保证修改后自动加载新资源：

• 给静态资源文件名添加内容哈希后缀，例如将common.js改为common.f8e3d1.js，每次修改文件后哈希值自动变化，浏览器会自动请求新资源
• 简化方案可以在资源引用路径后添加版本查询参数，例如 <script src="/static/common.js?v=1.0.1"></script>，每次修改文件后手动更新v参数的数值即可

其他排查方向 #

• 确认uvicorn启动时添加了--reload参数，否则修改静态文件后服务不会自动加载新资源，需要手动重启
  示例启动命令：uvicorn main:app --reload
• 如果你在FastAPI服务前部署了Nginx、CDN等反向代理服务，需要同步清理代理层的静态资源缓存，或者调整代理层的缓存规则

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