基于Nginx设置浏览器协商缓存

协商缓存(也称为条件请求)是HTTP缓存的一种机制，它允许浏览器在资源可能已更改的情况下验证缓存副本是否仍然有效。以下是配置Nginx实现协商缓存的详细方法：

基本协商缓存配置

server {
    # 其他配置...

    location / {
        # 启用ETag
        etag on;

        # 关闭强制缓存，让浏览器每次都发送验证请求
        add_header Cache-Control "no-cache, must-revalidate";

        # 设置Last-Modified头
        if_modified_since before;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        # 对静态资源启用ETag
        etag on;

        # 设置Last-Modified头
        if_modified_since before;

        # 允许浏览器缓存但需要验证
        add_header Cache-Control "public, no-cache";
    }
}

更精细的配置选项

1. 基于修改时间的协商缓存(Last-Modified/If-Modified-Since)

location / {
    # 确保Nginx发送Last-Modified头
    if_modified_since before;

    # 告诉浏览器需要验证缓存
    add_header Cache-Control "no-cache";
}

2. 基于ETag的协商缓存(ETag/If-None-Match)

location / {
    # 启用ETag生成
    etag on;

    # 告诉浏览器需要验证缓存
    add_header Cache-Control "no-cache";
}

3. 静态资源的协商缓存

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    # 启用ETag
    etag on;

    # 设置Last-Modified头
    if_modified_since before;

    # 允许公开缓存但需要验证
    add_header Cache-Control "public, no-cache";

    # 可选：设置过期时间为较短时间，作为后备
    expires 1h;
}

高级配置选项

1. 禁用特定文件的ETag

location ~* \.(php|asp|aspx)$ {
    etag off;
}

2. 自定义ETag生成方式

location / {
    # 使用文件大小和修改时间生成ETag(默认行为)
    etag on;

    # 或者完全自定义ETag
    # add_header ETag "custom-etag-value";
}

3. 结合强缓存与协商缓存

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    etag on;
    if_modified_since before;

    # 设置强缓存时间(如1年)，但同时需要验证
    add_header Cache-Control "public, max-age=31536000, must-revalidate";
}

验证配置是否生效

配置完成后，可以通过以下方式验证：

1. 使用浏览器开发者工具查看网络请求

   • 检查响应头中是否有ETag和Last-Modified
   • 后续请求应包含If-None-Match或If-Modified-Since头

2. 使用curl命令测试

   curl -I http://yourdomain.com/yourfile.js
   

   查看返回的头部信息

3. 第二次请求应该返回304 Not Modified状态码

注意事项

1. 对于动态内容，协商缓存可能比强缓存更合适
2. ETag的生成可能会影响服务器性能，特别是对于大文件或高流量网站
3. 在负载均衡环境中，确保所有服务器对同一文件生成相同的ETag
4. 某些CDN可能会修改或忽略ETag头部

通过以上配置，你可以有效地实现浏览器协商缓存，减少不必要的带宽使用，同时确保用户始终获取最新的内容。