Nginx控制前端静态资源不缓存

背景

项目中使用Nginx代理前端代码，每次前端代码修改完成后，浏览器有时候并不会生效。

原因是很多浏览器做了缓存，导致没有使用最新的前端代码。

解决

通过HTTP Header中的Cache-control字段（no-cache）来控制是否开启缓存。

相关可选项如下：

• no-cache：客户端可以缓存，但是每次使用缓存资源都必须发请求验证其有效性。如果没有变化返回304，如果发生变化，那理论上就是200。
• no-store：禁止缓存，不使用任何缓存

修改前的配置：

# 原有静态资源配置
location / {
	root   html/dist;
	index  index.html index.htm;
}

修改后的配置：

# 现有静态资源配置
location / {
	root   html/dist;
	index  index.html index.htm;
  # 可以缓存，没变就用缓存，有变就重新下载
	add_header Cache-control no-cache;
}

参考

1.[http header cache-control](Cache-Control - HTTP | MDN)

2.[nginx http header](Module ngx_http_headers_module)