http-server(npm)一直刷新不到最新内容？使用 -c-1 彻底解决缓存抓狂问题

在日常的前端开发、静态网页预览或打包产物验证中，http-server（npm 上非常流行且轻量级的零配置 HTTP 服务器）几乎是每个开发者的常用工具。

只需要在命令行中敲入：

npx http-server .

一个本地 Web 服务器就跑起来了。然而，绝大多数人在使用它时，都会踩到一个让人极其抓狂的隐蔽坑点：明明修改了代码或更新了静态资源，但在浏览器里反复刷新（甚至是 Ctrl + F5 强刷），显示的依然是旧内容！

---

为什么会这样？大多数人都忽视的缓存机制

当你使用默认命令启动 http-server 时，它其实默认开启了浏览器 HTTP 缓存机制。

在默认配置下，http-server 返回的 HTTP 响应头中会包含类似如下的 Cache-Control 设置：

Cache-Control: max-age=3600

这意味着：

1. 浏览器第一次访问时拿到文件并放入本地强缓存。
2. 在接下来的 3600 秒（1小时）内，浏览器再次请求相同的 URL 时，根本不会向服务器发送任何网络请求，而是直接读取本地 Disk Cache。
3. 即使你在编辑器里改爆了 CSS/JS/HTML，浏览器依然在自顾自地渲染一小时前的旧文件。

这就是为什么你会遇到“本地明明改了，浏览器却死活不生效”，甚至怀疑人生、清理浏览器历史记录、重启命令行的极端体验。

---

解决方案：使用 -c-1 参数关闭缓存

解决这个极度影响开发体验的问题其实非常简单，只需在启动命令中加上 -c-1 参数：

npx http-server -c-1

或者使用完整参数名称：

npx http-server --cors -c-1

-c-1 的含义

在 http-server 中，-c 参数用来指定缓存时间（单位秒）：

• -c 3600：缓存 1 小时（默认值时间不等，通常为 3600 秒）。
• -c 0：缓存 0 秒。
• -c-1：禁用缓存（Disable caching）。

添加 -c-1 后，http-server 返回的响应头将变为：

Cache-Control: max-age=0, must-revalidate, no-cache

此时浏览器每次请求都会向服务器询问最新内容，从而彻底避免了由于强缓存导致的网页“假刷新”现象。

---

总结与开发建议

启动场景	推荐命令	适用说明
本地开发/调试	npx http-server -c-1	强烈推荐，修改代码后随时刷新看最新效果
跨域接口测试	npx http-server -c-1 --cors	禁用缓存 + 开启 CORS 跨域支持
生产预演测试	npx http-server	模拟生产环境的真正缓存行为

下次如果遇到 npm http-server 始终不更新最新文件的问题，别再怀疑浏览器或抓狂了，加上 -c-1 重新启动，瞬间清爽！