前两天在做pc端页面的时候,一个页面在IE浏览器上进行自测的时候,发现当第二次以及之后请求的参数和第一次请求的参数一致的时候,返回的数据都是一样的,在后台服务器上也没有看到请求日志,而是使用第一次请求回来的数据返回给你。那要怎么解决这个问题呢?
目前我想到4种解决方案:
1、缓存问题只是针对get请求,所以可以把get请求改为post请求
2、在请求的url地址中加入时间戳或者随机数
加入时间戳或者随机数之后,这样每次请求的地址都不一样。
let url = url + '&time=' + new Date().getTime();
或者
let url = url + '&number=' + Math.random();
api.get(url)
3、在请求头中设置Cache-Control: no-cache
XMLHttpRequest.setRequestHeader(‘"Cache-Control","no-cache"’)
在后端响应头也要设置
header(“Cache-Control:no-cache,must-revalidate”);
可以参考一下这篇文章:web性能优化之:no-cache与must-revalidate深入探究
4、在请求头中设置If-Modified-Since:0
XMLHttpRequest.setRequestHeader('If-Modified-Since','0')
HTTP的请求头标签 If-Modified-Since与Last-Modified
1.基本定义
Last-Modified 与If-Modified-Since 都是标准的HTTP请求头标签,用于记录页面的最后修改时间。
2.发送方向
Last-Modified 是由服务器发送给客户端的HTTP请求头标签
If-Modified-Since 则是由客户端发送给服务器的HTTP请求头标签
3.应用场景
-
Last-Modified 在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间,格式类似这样:
Last-Modified: Fri, 12 May 2006 18:53:33 GMT 后面跟的时间是服务器存储的文件修改时间 -
If-Modified-Since 客户端第二次请求此URL时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 报头,询问该时间之后文件是否有被修改过:
If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT 后面跟的时间是本地浏览器存储的文件修改时间
如果服务器端的资源没有变化,则时间一致,自动返回HTTP状态码304(Not Changed.)状态码,内容为空,客户端接到之后,就直接把本地缓存文件显示到浏览器中,这样就节省了传输数据量。
如果服务器端资源发生改变或者重启服务器时,时间不一致,就返回HTTP状态码200和新的文件内容,客户端接到之后,会丢弃旧文件,把新文件缓存起来,并显示到浏览器中。
以上操作可以保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。
关于If-Modified-Since与Last-Modified可以参考这篇文章链接地址