Http Cache-Control，http头部已经设置了

Question

http response

chrome中的通信情况

------20:01更新-------

又在response的header里面设置了etag和last-modified，但缓存还是没有用。

我是在chrome地址栏点网址回车，来重新发送请求的；此外我也试了chrome上的刷新按钮，也是一样，request header中都自带了max-age=0

更新后的http request

更新后的http response

更新后的chrome通信情况

Answer 1

request中带有Cache-Control:max-age=0,代表强制要求服务器返回最新的文件内容，关于max-age=0在request和response中的不同意义，可以参见这个stackoverflow上的问答What's the difference between Cache-Control: max-age=0 and no-cache?中的介绍，其中要点就是：如果max-age=0出现在请求中，则代表浏览器要求服务器，此次请求必须重新返回最新文件（请求完成后，你会看到http状态码是200）；如果max-age=0出现在响应中，则代表服务器要求浏览器你在使用本地缓存的时候，必须先和服务器进行一遍通信，将etag、 If-Not-Modified等字段传递给服务器以便验证当前浏览器端使用的文件是否是最新的（如果浏览器用的是最新的文件，http状态码返回304，服务器告诉浏览器使用本地缓存即可；否则返回200，浏览器得自己吧文件重新下载一遍）。

回到你刚才的问题，由于你的request中有max-age=0，所以强制服务器重新返回文件了，这种情况一定是你的disable cache功能打开了,即这个位置：
把这个位置的选项勾掉即可。
还有就是检查这个区域：
确保这个区域也没有勾上。
如果这两项都没有勾上，那就不知道是什么原因了，换一个浏览器试一下。

2017-3-2更新：突然想起来一个问题，你不能光看response头信息。虽然写着200 OK,但是你还要看一下Header中的Status Code字段，看看是不是 200 OK(from disk cache)或者200 OK(from memeory cache)之类的。

Answer 2

看下 request header里有没有这个

cache-control:no-cache

要么你是刷新访问的，要么你开启了Disable cache (while DevTools is open)，后者可以在调试工具右上角齿轮里关掉。

Answer 3

整整一个早上都在研究一样的问题，我是用的nodejs+express+reactjs，明明设置了

res.header('Cache-Control', 'max-age=604800, must-revalidate')

就是不起效果，一直都是200,200的，气死我了

然后我就换火狐，结果就正常了，该304的就304，该缓存的绝对不会发出请求，然后我用另一台电脑上的chrome访问我的网页，也都是正常的，就我本机上的chrome不正常。

现在只能猜测chrome太过聪明了，他能知道你是在调试本机上的代码，应该是我webpack设置里的某些项目透露了这一点吧，所以他默认就不使用缓存了，查看request里面的cache-control会发现chrome才会有max-age=0这个属性，火狐没有，但是很显然只有本机的chrome会强制不使用缓存

Answer 4

如果你单单访问index.html（就是一个文件，内部没有引入其他css js img等。）
1.服务端开启last modify 或者etag 任意一个，都可以缓存
2.如果你上面两个都没有开启，而只是单独设置了一个过期时间 ，那么单一的html就不会缓存。因为他的请求头一直带着 max-age=0.

如果你index.html中引入了一张图。但是依然采取上面2的策略，那这张图会缓存，而且在过期时间之前，这张图用友不会变动，（即使你在服务器上删除了他，或者强制刷新）

上面是我的实验。我也很想搞明白这个问题。
我猜可能是因为

 目前Webkit资源分成两类，一类是主资源，比如HTML页面，或者下载项，一类是派生资源，比如HTML页面中内嵌的图片或者脚本链接，分别对应代码中两个类：MainResourceLoader和SubresourceLoader。虽然Webkit支持memoryCache，但是也只是针对派生资源，它对应的类为CachedResource，用于保存原始数据（比如CSS，JS等），以及解码过的图片数据。