【发布时间】：2021-07-05 02:26:00
【问题描述】：
当我在用 Chrome 测试缓存处理中的一个奇怪行为时（我问了一些关于它的问题 here），我发现了其他东西：当服务器返回 304 响应时，Chrome 开发工具显示 200 状态代码。
在这里您可以看到 chrome 开发工具显示的内容 (200)，并且我包含了一个显示服务器 304 响应的wireshark 捕获。
这里是和 Firefox 一样的用法，显示 304 代码：
更有趣的是两个浏览器的时间差异：
Firefox 没有显示接收部分的延迟，但 Chrome 表示需要 3.91 毫秒。
你知道为什么 Chrome 没有显示正确的状态码吗？
如果你想自己测试，这里是服务器代码：
#!/usr/bin/env node
'use strict';
const express = require('express');
const cors = require('cors');
const compression = require('compression');
const pathUtils = require('path');
const fs = require('fs');
const http = require('http');
let app = express();
app.disable('x-powered-by');
app.use(express.json({ limit: '50mb' }));
app.use(cors());
app.use(compression({}));
app.use(function (req, res, next) {
res.set('Cache-control', 'no-cache');
console.log(req.headers);
next();
});
let server = http.createServer(app);
app.get('/api/test', (req, res) => {
res.status(200).send(fs.readFileSync(pathUtils.join(__dirname, 'dummy.txt')));
});
server.listen(1234);
和客户：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let test = fetch('http://localhost:1234/api/test').then((res) => {
console.log(res.status);
return res.text();
});
</script>
</body>
</html>
【问题讨论】：
-
这里完全一样，唯一的区别是服务器根本没有收到来自 Chrome 的请求。 Firefox 发送请求，服务器回复 304 时，在控制台中显示得很好。
-
我没有答案，但我怀疑 Chrome 只是显示缓存的响应（包括缓存的响应代码），因为资源已成功验证。即使从缓存中提供了某些内容并且根本没有请求，我相信 Chrome 也会将缓存的 200 显示为响应代码。有点令人困惑，但并非完全不合理。
标签： google-chrome http google-chrome-devtools cache-control