浏览器缓存：Json响应

Question

我尝试使用Etag缓存来自api请求的json响应。 我正在调用类似http://localhost:3000/api/config的内容并获取：

响应标题：
缓存控制：public，max-age = 31557600
连接：保持活跃
内容长度：11
内容类型：应用/ JSON;字符集= UTF-8
日期：2015年5月13日星期三，格林威治标准时间11:41:52 ETag的：＆＃34; 94d52736bcd99b1ac771f13b1bbdf622＆＃34;
X供电-通过：快速

Resonse：{id：1}

我希望浏览器缓存响应并通过＆＃34; f5＆＃34;向Etag发送下一个请求triggert。但事实并非如此。

请求标题第2次请求：
接受：text / html的，应用/ XHTML + xml的，应用/ XML; Q = 0.9，图像/ WEBP， / 的; Q = 0.8
Accept-Encoding：gzip，deflate，sdch
接受语言：DE-DE，DE; Q = 0.8，EN-US; Q = 0.6，连接; Q = 0.4
缓存控制：无缓存
连接：保持活跃
主持人：本地主机：3000
附注：无缓存
User-Agent：Mozilla / 5.0（Windows NT 6.1; WOW64）AppleWebKit / 537.36（KHTML，类似Gecko）Chrome / 42.0.2311.135 Safari / 537.36

因此，通过直接api请求缓存纯json响应是不可能的吗？
或者我是否会错过任何内容。

api是使用express：

完成的节点js测试实现

router.get('/config', function(req, res) {
    var eTag = crypto.createHash('md5').update(JSON.stringify(config)).digest('hex');
    res.setHeader('ETag', '"' + eTag + '"');
    res.setHeader('Content-Type', 'application/json');
    res.setHeader('Cache-Control', 'public, max-age=31557600');
});

使用chrom（42.x）和firefox（37.x）的Testet

响应的答案。

Answer 1

嗨，这段代码似乎对我有用：

router.get('/config', function(req, res) {
    var eTag = crypto.createHash('md5').update(JSON.stringify(config)).digest('hex');

    if (req.headers['if-none-match'] && req.headers['if-none-match'] === '"' + eTag + '"') {
        res.status(304);
        res.end();
    } else {
        res.setHeader('ETag', '"' + eTag + '"');
        res.setHeader('Content-Type', 'application/json');
        res.setHeader('Cache-Control', 'public, max-age=31557600');
        res.send(JSON.stringify(config));
    }
});

使用浏览器网址栏http://localhost:3000/api/config

调用api

Answer 2

看起来你可能正在使用chrome。 在＆＃34; f5＆＃34;：

之后，Chrome应在请求中包含以下标题

If-None-Match:"94d52736bcd99b1ac771f13b1bbdf622"

如果您没有看到这一点，请检查Chrome设置/常规，并确保＆＃34;禁用缓存（当DevTools处于打开状态时）未选中：

Answer 3

使用jQuery我们可以使用ifModified选项：

$.ajax({
   type: "GET",
   ifModified: true,
   url: "http://localhost:3000/api/config"
}).then(function(data) {
   . . .
});