vue+elementUI项目,在win10系统的IE11浏览器运行,
F12爆出几个问题:
- 此页上的代码禁用了反向和正向缓存
- script 未知错误
- 304 not modified
304 Not Modified 是什么意思
304 的标准解释是:Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
如果客户端在请求一个文件的时候,发现自己缓存的文件有 Last Modified ,那么在请求中会包含 If Modified Since ,这个时间就是缓存文件的 Last Modified 。因此,如果请求中包含 If Modified Since,就说明已经有缓存在客户端。只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。对于静态文件,例如:CSS、图片,服务器会自动完成 Last Modified 和 If Modified Since 的比较,完成缓存或者更新。但是对于动态页面,就是动态产生的页面,往往没有包含 Last Modified 信息,这样浏览器、网关等都不会做缓存,也就是在每次请求的时候都完成一个 200 的请求。
因此,对于动态页面做缓存加速,首先要在 Response 的 HTTP Header 中增加 Last Modified 定义,其次根据 Request 中的 If Modified Since 和被请求内容的更新时间来返回 200 或者 304 。虽然在返回 304 的时候已经做了一次数据库查询,但是可以避免接下来更多的数据库查询,并且没有返回页面内容而只是一个 HTTP Header,从而大大的降低带宽的消耗,对于用户的感觉也是提高。
当这些缓存有效的时候,通过 HttpWatch 查看一个请求会得到这样的结果:
- 第一次访问 200
- 鼠标点击二次访问 (Cache)
- 按F5刷新 304
- 按Ctrl+F5强制刷新 200
如果是这样的就说明缓存真正有效了。以上就是我对 HTTP 304 的一个理解。
附参考文章:
报错1:
报错2:
冲刷了页面,还是报错(截图如下)。
报错2:“304 not modified”
解决办法:(原文地址:点击查看)
ajax返回结果HTTP304 … 每次请求的走的是缓存,而Chrome等浏览器是正常返回的200
ajax缓存= = IE真是无所不能啊 Σ( ° △ °|||)︴
!ajax走缓存= =!╮(╯▽╰)╭
原因找到了,bug就很好改了,不让缓存或者实时获取最新的就行
【解决方案】
IE下的ajax请求是按照ip地址和请求路由进行缓存,所以最简单的办法:
1.直接在请求的时候再请求链接的末尾自动添加个时间戳或者随机种子就OK了
像上面的话: /Home/GetMusic?id=1+时间戳 ,很方便可以解决
2.既然它缓存,那就不让它缓存
前端页面禁止缓存:
前端ajax禁止缓存:
ajax请求的cache参数:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。设置为false将不会从浏览器缓存中加载请求信息。
后端:
.net : Response.CacheControl=“no-cache”;
php : header(“Cache-Control: no-cache, must-revalidate”);
header(“Pragma: no-cache”);
特意发文一篇,第一次遇到这情况,备份留存作为以后的参考。