为什么 Chrome 将此文件视为文档，而 Firefox 则视为图像？

Question

我的 express 应用中有一个下载 GET 端点。现在它只是从文件系统中读取一个文件，并在设置一些头文件后将其流式传输。

当我在 Chrome 中打开端点时，我可以看到它被视为“文档”，而在 Firefox 中它被视为类型 png。

我似乎无法理解为什么会被区别对待。

Chrome：标题栏 - “下载” Firefox：标题栏 - “图像名称”

在 Chrome 中，如果我刷新地址栏，这也会导致不缓存图像。 在 Firefox 中，它被缓存得很好。

这是我的快递代码：

app.get("/download", function(req, res) {
  let file = `${__dirname}/graph-colors.png`;
  var mimetype = "image/png";

  res.set("Content-Type", mimetype);
  res.set("Cache-Control", "public, max-age=1000");
  res.set("Content-Disposition", "inline");
  res.set("Vary", "Origin");
  var filestream = fs.createReadStream(file);
  filestream.pipe(res);
});

还为浏览器网络选项卡附加图像。

Answer 1

这都是和 Chrome 的行为有关，你可以在另一个网站上测试，比如Example.png on Wikipedia。

Chrome 总是将您在地址栏中打开的“东西”视为文档，而忽略它的真正含义。您甚至可以测试加载css，它会读取文档。

标题为download，因为你的路径是/download，不能根据this SO thread改。

对于缓存，当您重新加载任何内容、页面或图像时，Chrome 显然会忽略缓存。您可以尝试使用 Wiki example.png，您将得到 304 而不是“（来自缓存）”。 （304表示请求已发送，服务器实现了ETag、if-none-match或类似技术）