跨域请求服务端返回的 304 状态码会被浏览器修改成 200，是浏览器的 BUG 吗

这个问题仅出现在 Chrome 和 Edge ，也给 chromium 官方提了 Bug 不知道会不会确认是个 BUG 。

1.server code

const express = require('express');
const cors = require('cors');

const app = express();
const port = 3000;

app.use(cors({
  origin: '*',
  allowedHeaders: ['If-None-Match', 'If-Modified-Since'],
  exposedHeaders: ['ETag', 'Last-Modified', 'Cache-Control'],
  maxAge: 86400,
}));

app.get('/getcache', (req, res) => {
  if (req.header('If-None-Match')) {
    return res.status(304).end();
  }

  const time = Date.now();
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('ETag', time);
  res.send(JSON.stringify({ time }));
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

2.client code

fetch('http://localhost:3000/getcache');

在其他网页（跨域）的控制台执行上面 fetch 请求即可，第二次请求后内容没变化但是状态码一直是 200 。用代理软件抓包发现服务端实际响应的是 304 ，在 Safrai 或者 Postman 中请求也是 304 。

如果不是跨域请求，在同域请求 Chrome 是能正常显示 304 状态。

不明白 chrome 会修改这个状态，实际不管是同域还是跨域都支持了协商缓存，状态码为啥要修改成 200 ？

jiangzm

2023-08-03 15:08:32 +08:00

@sujin190 #2 原始报文不应该被修改，如果是强缓存直接从本地拿的显示 200 没问题，已经发起了远程请求应该直接显示响应的状态码才对

@hepeng10 #3 304 就是 HTTP 标准定义的怎么可能拿不到 304 ，是不是有点孤陋寡闻了

@deplivesb #4 这个就要看 chromium 怎么定义的这个 200 ，304 确实要读本地缓存，是不是读了缓存（强缓存和协商缓存）统一都是 200 ，就忽略协商缓存过程响应的 304

@wonderfulcxm #5 从来没见过 304 状态吗

hepeng10

2023-08-03 23:06:03 +08:00

又问了下 ChatGPT ，这是它的回答：

如果开发者工具中显示的是响应状态码为 304 ，但是在 Ajax 请求的代码中打印出来的是 200 ，这可能是因为浏览器的缓存机制导致的。

当浏览器进行 Ajax 请求时，如果之前已经请求过同一个资源，并且服务器返回了 304 状态码，表示资源未修改，那么浏览器会直接从缓存中获取该资源，并返回 200 状态码。这样做是为了减少网络流量和加快页面加载速度。

实际上，浏览器在处理条件请求（返回 304 ）时，对开发者是透明的，这意味着在 Ajax 请求的代码中，你无法直接获取到 304 状态码。浏览器会自动处理缓存，并将从缓存中获取资源后返回 200 状态码。