为什么Chrome Dev Tool显示200状态码而不是304?

24

在测试Chrome缓存处理的奇怪行为时(我在这里问了一些相关问题:here),我发现了另一件事情:当服务器返回304响应时,Chrome开发工具显示200状态代码。

以下是Chrome开发工具显示的内容(200),同时我还包括了一个Wireshark捕获来展示服务器304响应:

enter image description here

以下是Firefox相同的用法,它显示304代码:

enter image description here

两种浏览器之间最有趣的区别在于时间差异:

enter image description here

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并在控制台中显示得很好。 - walox
2
我没有答案,但我怀疑Chrome只是显示了缓存的响应(包括缓存的响应代码),因为资源已成功验证。即使某些内容从缓存中提供且根本没有请求,我认为Chrome也会显示缓存的200作为响应代码。有点令人困惑,但并不完全没有道理。 - Kevin Christopher Henry
2个回答

6

1
Chrome的错误报告似乎已经转移到https://bugs.chromium.org/p/chromium/issues/detail?id=1086809。 - lewis

0
设置最大年龄。例如:
max-age=2592000,no-cache

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接