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

编程问答 2022-05-14

问题描述

当我在 Chrome 缓存处理中测试一个奇怪的行为时（我问了一些关于它的问题 here），我发现了一些别的东西：当服务器返回 304 响应时，Chrome 开发工具显示 200 状态代码。

在这里你可以看到 chrome 开发工具说的是什么 (200)，我包含了一个显示服务器 304 响应的wireshark 捕获。

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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cache-controlgoogle-chromegoogle-chrome-devtoolshttphttp