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

Question

我的快速应用程序中有一个下载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，因此读取为下载，因此无法根据this SO thread进行更改。

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