缓存场景下为什么Chrome DevTools在服务器返回304时显示200状态码

问题背景 #

此前排查Chrome缓存处理逻辑的异常行为时，已经积累了两类相关观测结果：

• HTTPS场景下Chrome不会发送If-None-Match请求头，相同逻辑的HTTP场景下Chrome会正常携带该请求头
• 本次测试新增观测到的异常：服务器实际返回304响应时，Chrome DevTools面板显示的状态码为200

测试佐证依据 #

• 本地测试截图可对应Chrome DevTools的异常显示结果
• 配套Wireshark抓包数据可证明，服务器实际返回的确实是304响应
• 完全相同的操作流程下，Firefox的DevTools可以正确展示304状态码
• 两款浏览器的请求耗时统计存在明显差异：Firefox不单独展示响应接收阶段的延迟时长，Chrome会单独标注接收环节耗时为3.91ms

核心疑问 #

希望得到开发者对该异常的解释：为什么Chrome DevTools没有展示服务器实际返回的304状态码？

本地复现代码 #

如需自行复现该问题，可直接使用以下服务端、客户端代码搭建测试环境：

服务端代码 #

#!/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>

内容的提问来源于stack exchange，提问作者Nathanaël Spriet