浏览器缓存怎么设置：Nginx 与宝塔的 Cache-Control 配置和验证

浏览器缓存的设置位置在 Web 服务器的响应头，而不是浏览器里。
用户搜“浏览器缓存怎么设置”，实际要做的是让 Nginx 或宝塔面板在返回 CSS、JS、图片时带上 Cache-Control 头，告诉浏览器这些文件可以缓存多久。
下面按静态资源和 HTML 两类分别给配置，并说明怎么验证生效。

先分清哪些文件该缓存、缓存多久

浏览器缓存的核心是 Cache-Control 响应头，常用指令有两个：

• max-age=秒数：文件在多少秒内可以直接用本地副本，不再请求服务器。
• no-cache：每次使用本地副本前都要向服务器确认是否更新，但确认未变时仍可返回 304，不重复下载内容。

静态资源（CSS、JS、图片、字体）适合设长缓存，因为文件名通常带哈希或版本号，内容变了文件名也会变。
HTML 文件不适合长缓存，否则用户可能一直看到旧页面。

一个常见组合是：

• 图片、字体：max-age=2592000（30 天）或更长。
• CSS、JS：max-age=604800（7 天）到 31536000（1 年），前提是文件名带哈希。
• HTML：no-cache 或 max-age=0，让浏览器每次校验。

如果站点还没做文件名哈希，CSS、JS 不要设一年，否则改文件后用户看不到更新。
这种情况下可以先设较短时间，或改用查询字符串版本号。

Nginx 中按文件类型设置缓存头

在站点的 server 块内，
用 location 匹配扩展名并添加 expires 或 add_header。expires 是 Nginx 的便捷指令，
会同时生成 Expires 和 Cache-Control。

server {
    listen 80;
    server_name example.com;
    root /www/wwwroot/example.com;

    # HTML 不缓存，每次向服务器确认
    location ~* \.(html|htm)$ {
        add_header Cache-Control "no-cache";
        try_files $uri $uri/ =404;
    }

    # 图片、字体长缓存
    location ~* \.(jpg|jpeg|png|gif|webp|svg|ico|woff2?|ttf)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
        try_files $uri =404;
    }

    # CSS、JS 缓存 7 天，适合未做文件名哈希的站点
    location ~* \.(css|js)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800";
        try_files $uri =404;
    }
}

改完配置后先测试语法再重载：

nginx -t
nginx -s reload

如果 nginx -t 报错，先检查花括号是否配对、location 是否写在 server 块内，不要直接重载。

宝塔面板里的操作路径

宝塔面板用户可以不用手写全部配置：进入 网站 → 设置 → 配置文件，在 server 块内粘贴上面的 location 片段，保存后点“重载配置”。

也可以使用宝塔自带的缓存设置：网站设置里的“缓存”或“性能”相关选项，不同版本位置略有差异，以面板实际显示为准。
如果面板选项只控制动态缓存，静态文件缓存仍建议按上面的 location 方式配置，因为控制更直接。

需要提醒的是，宝塔修改配置文件后如果保存失败，通常是权限或语法问题，先看面板返回的报错行号，再回到配置文件对应位置检查。

验证缓存头是否真的生效

配置重载后，用 curl 查看响应头，重点看 Cache-Control 和 Expires：

curl -I https://example.com/static/app.css

预期能看到类似 Cache-Control: public, max-age=604800。
如果完全没有 Cache-Control，先确认请求的文件扩展名是否被 location 匹配到，以及站点是否走了 CDN 或反向代理，缓存头可能在那一层被覆盖。

在浏览器里验证：打开开发者工具 → Network 面板 → 刷新页面，点某个 CSS 或图片，看 Response Headers 中的 Cache-Control。
第二次访问时，如果显示 from disk cache 或 from memory cache，说明浏览器直接用了本地副本；
HTML 请求通常仍会发出并可能返回 304。

容易踩的几个坑

• 只设了 Expires 没设 Cache-Control：现代浏览器以 Cache-Control 优先，建议两者都设或直接用 expires 指令生成。
• HTML 被长缓存：用户反馈“改了页面没变化”，先检查 HTML 是否被设了 max-age 较大的值，改回 no-cache。
• CDN 覆盖了源站缓存头：如果套了 CDN，需要在 CDN 控制台单独配置缓存规则，否则源站的 Cache-Control 可能不生效。
• 带查询字符串的静态资源：Nginx 的 location 按路径匹配，查询字符串不影响匹配，但浏览器缓存键包含完整 URL，改版本号后自然会重新请求。

设置浏览器缓存不需要改浏览器，重点是让服务器返回正确的 Cache-Control。
静态资源按是否带文件名哈希决定缓存时长，HTML 保持短缓存或 no-cache，配置后用 curl -I 和开发者工具确认响应头，再观察用户端是否还有旧文件问题。