IE Cache Issue

January 6, 2016

昨天发现了一个奇怪的问题,一个Web Application Update Entity的功能,在Chrome/Firefox上测试都正常运行,到了IE 11上就不行了,主要表现就是Update成功以后再次读取记录会读取出Update之前的值。功能逻辑就是一些简单的通过RESTful API来执行CRUD操作的Ajax调用。在IE上用控制台仔细调试一番后,发现在打开控制台的时候居然能表现正常,而关掉以后就立刻不行,这明显就是IE爸爸不走寻常路,把API也Cache下来了。于是就有了以下的解决方案。

前端解决方案

既然是因为Cache产生的问题,那么就很容易解决,在API调用(主要是GET)中都添加一个随机数或者时间戳就行了,强制浏览器刷新。比如,原本请求的应该是这样的地址:

var url = '/api/metadata/entity/list?type=car&name=qq'

可以通过添加一个时间戳修改成这样:

var url = '/api/metadata/entity/list?type=car&name=qq&_t=' + new Date().getTime()

其中添加的 _t 参数如果服务端没有定义的话就会自然而然地被扔掉(如果是有意义的参数就换个key,或者不写key也行),浏览器缓存也会因为每次请求的URL实际上都不一样而失效,这样问题就解决了。但是,对于一个大型项目来说,如果每个URL都要怎么来一遍,那么用软件工程界的专业术语来说,叫做不好维护。很有可能什么时候漏掉了一个URL没有加时间戳,就埋下了一个BUG的种子。

服务端解决方案

此处以使用ExpressJS搭建的NodeJS服务器为例,其它代码也可以使用类似的方法达到同样的效果。

以下是一本万利的解决思路:

// No cache for RESTful APIs
    app.use('/api/*', function (req, res, next) {
        res.header("Cache-Control", "no-cache, no-store, must-revalidate");
        res.header("Pragma", "no-cache");
        res.header("Expires", 0);
        next();
    });

这段代码所做的事情是,对于所有进来的以’/api’开头为路由的请求,都执行以下操作:

  • 给响应头添加 "Cache-Control": "no-cache, no-store, must-revalidate" 键值对
  • 给响应头添加 "Pragma": "no-cache" 键值对
  • 给响应头添加 "Expires": 0 键值对
  • 将请求交给下游中间件,继续处理,该干嘛干嘛

Cache-Control :

  • no-cache:指示请求或响应消息不能缓存
  • no-store:用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
  • must-revalidate:字面理解,必须重新验证

Pragma :

  • no-cache:在HTTP/1.1协议中,它的含义和Cache- Control:no-cache相同

Expires:

  • 自然就是缓存的过期时间了

那么通过以上方法,只要浏览器是支持基本HTTP协议的,它就应该能够做出相应的操作,从而不对API进行缓存。很显然这段代码应该在所有API的具体方法执行之前被执行,对于Express来说我们只需要把它放在其他路由代码之前就可以了。

总结

经过验证,两种方法都可以达到预期的效果。至于实际使用哪一种,可能还要视具体需求而定。



Loading Disqus......