Ant-design-pro: 前端重定向，index.html文件被浏览器缓存，导致整个应用都是旧的
我的域名是 example.com，
访问 http://example.com，在前端会默认路由到 http://example.com/dashbord/
这个时候，如果代码有更新。 我访问http://example.com/dashbord/ 可以获取到最新内容。
但是访问http://example.com，浏览器url变成http://example.com/dashbord/，但页面是上次缓存的。 HTTP response status是： 200 (from disk cache)
请问如何解决 重定向 index.html 被缓存的问题？
yijingping
All 26 comments
Translation of this issue:
Front-end redirection, index.html file is cached by the browser, resulting in the entire application is old
My domain is example.com,
Visit http://example.com and the default route will be http://example.com/dashbord/
This time, if the code is updated. I can get the latest content by visiting http://example.com/dashbord/.
However, when visiting http://example.com, the browser url becomes http://example.com/dashbord/, but the page was last cached. HTTP response status is: 200 (from disk cache)
How to solve the problem of redirecting index.html cached?
ant-design-bot
on 24 Apr 2018
ctrl+shifit+r
chenshuai2144
on 25 Apr 2018
@chenshuai2144 我知道自己如何去清缓存。 但是我不能让用户每次访问我的网站的时候，都强刷一次
yijingping
on 25 Apr 2018
线上版本为什么会需要经常改动！
每次构建出来的 js hash 都不一样的
chenshuai2144
on 25 Apr 2018
@chenshuai2144 迭代开发，每隔几天都会上线新功能，当然会经常变动。 js hash 确实不一样， 但是html文件被缓存了，导致引用的旧的js css 文件。
yijingping
on 25 Apr 2018
试试这个
<HEAD>
<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
<METAHTTP-EQUIV="Expires"CONTENT="0">
</HEAD>
这个加过了，对于跳转的页面不生效。
如 http://example.com，在前端会默认路由到 http://example.com/dashbord/， 显示的是旧的版本。
但直接访问 http://example.com/dashbord/，显示的是新版本 。
yijingping
on 25 Apr 2018
@sorrycc
这个问题很奇怪， 你解决过吗？
chenshuai2144
on 25 Apr 2018
在HTTP协议中，只有后端返回 expires 或 Cache-Control:max-age=XXX， 前端才缓存。
但在浏览器中，默认会对 html css js 等静态文件、以及重定向进行缓存，如果在HEAD头中指定：
<HEAD>
<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
<METAHTTP-EQUIV="Expires"CONTENT="0">
</HEAD>
浏览器不会缓存html，但是还是会对重定向缓存，并且这种方式并不规范，可能有的浏览器不支持。
我的最终解决方案是：
1） 对hash过的静态文件还是采用默认方式，客户端会缓存。
2）对html文件，返回时增加头：Cache-Control，必须每次来服务端校验，根据etag返回200或者304
对应的nginx配置如下：
upstream example-be {
ip_hash;
server unix:/run/example-be.sock;
}
server{
listen 80; #监听端口
server_name example.com
# 后台api
location ~ ^/api {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
include uwsgi_params;
uwsgi_pass example-be;
}
# 前端静态文件
location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
root /var/www/example-fe/dist/;
}
# 前端html文件
location / {
# disable cache html
add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
root /var/www/example-fe/dist/;
index index.html index.htm;
try_files $uri /index.html;
}
}
由于浏览器缓存静态文件的时间不可控，我们可以在nginx上自己配置expires 1M（1个月）
# 前端静态文件
location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
root /var/www/example-fe/dist/;
expires 1M;
add_header Cache-Control "public";
}
应该是因为index.html被浏览器缓存了, 虽然已经发布了新版本但是由于请求index.html是直接命中了浏览器缓存导致请求并未到达服务器,直接使用的缓存的index.html的内容,这也导致了
我猜测一下：
这个加过了，对于跳转的页面不生效。
如 http://example.com，在前端会默认路由到 http://example.com/dashbord/， 显示的是旧的版本。
浏览器缓存了这个域名的index.html文件
但直接访问 http://example.com/dashbord/，显示的是新版本 。
浏览器检查有没有缓存相应的html文件（没有，因为这是一个客户端路由），发出请求 ，nginx 接收到请求，发现不存在相关的html 文件，于是返回 index.html 文件（try_files），现在返回的index.html是你最新的文件。
neewbee
on 30 Apr 2018
@neewbee 访问 http://example.com/dashbord/ 时，请求带有etag，服务端返回的是304。 所以客户端应该是有这个版本的html的
yijingping
on 2 May 2018
@wangshuai0 我这是好的
yijingping
on 28 Aug 2018
@yijingping 后面我又试了下，是好的，为了测试，我又把这个配置在nginx上去掉后发现点击链接跳转还是加载到了新的页面没有出现（ 200 (from disk cache），不知道是什么原因。
wangshuai0
on 28 Aug 2018
@yijingping nice!!!解决了困扰我好久的问题
kerwin-ly
on 17 Sep 2018
kennylbj
on 23 Nov 2018
1） 对hash过的静态文件还是采用默认方式，客户端会缓存。
2）对html文件，返回时增加头：Cache-Control，必须每次来服务端校验，根据etag返回200或者304
请问具体代码是怎么样的？我是vue开发，也是版本迭代，基本每周一次，每次都是缓存问题，心累，求解决办法。
ghost
on 26 Feb 2019
@yijingping 我测试发现设置 add_header Cache-Control 'no-store'; 才行。
add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0'; 仍会返回 304
iiijarvis
on 13 Mar 2019
应该是因为index.html被浏览器缓存了, 虽然已经发布了新版本但是由于请求index.html是直接命中了浏览器缓存导致请求并未到达服务器,直接使用的缓存的index.html的内容,这也导致了
没有使用nginx该怎么禁止html缓存
qqwrv123
on 21 Jun 2019
用下面的代码配置 nginx，完美解决 public 是不行的
# 前端静态文件
location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
root /var/www/example-fe/dist/;
expires 1M;
add_header Cache-Control "no-cache";
}
no-cache 表示不缓存过期资源，缓存会向服务器进行有效处理确认之后处理资源，即 304
no-store 才是真正的不进行缓存。
public 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存，即使是通常不可缓存的内容（例如，该响应没有max-age指令或Expires消息头）。
shanelau
on 21 Jun 2019
在部署完成的时候，我点击页面内某个路由他不是新开页面跳转，而是push的方式加载路由，但是新代码就不会更新，该怎么解决？
tiyunchen
on 1 Jul 2019
如果nginx回复头设置缓存策略cache-control为no_cache,no_store,然后增加一个回复头 标志index.html sha512值，前端保存下来这个值，同时每次调用接口之后都检查这个值和本地保存的值，如果两个值不一样就重载index.html，不知道这样是否可行。因为考虑到实际上很多情况是因为后端接口不兼容，如果都是静态界面，只是显示旧的界面并不会有啥问题。
luvjoey1996
on 19 Nov 2019
确实配上no-store才能不缓存，已测试，解决了很久的困扰，感谢分享
NMZD
on 3 Dec 2019
那如果用户就是使用这个平台，然后这时候发布了一个功能，用户切换页面的时候就会导致页面资源文件丢失的情况
Pengjee
on 8 May 2020
Related issues
wuyongdec
·
3Comments
zhuanglong
·
3Comments
Jerry-goodboy
·
3Comments
kaoding
·
3Comments
952425340
·
3Comments
Most helpful comment
在HTTP协议中，只有后端返回 expires 或 Cache-Control:max-age=XXX， 前端才缓存。
但在浏览器中，默认会对 html css js 等静态文件、以及重定向进行缓存，如果在HEAD头中指定：
浏览器不会缓存html，但是还是会对重定向缓存，并且这种方式并不规范，可能有的浏览器不支持。
我的最终解决方案是：
1） 对hash过的静态文件还是采用默认方式，客户端会缓存。
2）对html文件，返回时增加头：Cache-Control，必须每次来服务端校验，根据etag返回200或者304
对应的nginx配置如下：
由于浏览器缓存静态文件的时间不可控，我们可以在nginx上自己配置expires 1M（1个月）