简单来说, 304状态码表示资源未被修改。当不是第一次访问一个静态页面或者图片时,就会得到这么一个提示。这个是服务器提示浏览器,这个资源没有发生改变,你直接使用上一次下载的就行,不需要重新下载。这样节约了带宽,而且浏览器的加载速度也很快。
在开发时碰到的304状态码,请求的使用axios:
axios.get('/data.json').then((res) => {
console.log(res);
})
对于同一个资源,在进行了一次请求之后,浏览器就已经有了请求版本的一个人内容,和这个版本的ETag,当下次用户再需要这个资源,浏览器再次向服务器请求的时候,可以利用请求头If-None-Match来告诉服务器自己已经有个ETag为abc123的文件(例如下图的data.json),这样,如果服务器上的文件没有变化,也就是说服务器上的文件的ETag也是abc123的话,服务器就不会再返回文件的内容,而是返回一个304的响应,告诉浏览器该资源没有变化,缓存有效。
如下图:使用的文件为data.json
可以看到图中有请求头有 If-None-Match ,表示服务器已经有data.json文件内容且文件内容没有变化了,对比If-None-Match内容与ETag的内容一致,服务器没有返回文件内容,而是返回了304状态码,表示缓存有效,浏览器将直接调用本地缓存,加载会更快。
重新刷新页面请求时,显示的状态码为200,如下图所示: