0

I have a download GET endpoint in my express app. For now it simply reads a file from the file system and streams it after setting some headers.

When i open the endpoint in Chrome, I can see that this is treated as a "document", while in Firefox it is being treated as type png.

I can't seem to understand why it is being treated differently.

Chrome: title bar - "download" Firefox: title bar - "image name"

In Chrome, this also leads to no caching of the image if I refresh the address bar. In Firefox it is being cached just fine.

This is my express code:

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);
});

Also attaching images for Browser network tabs.

enter image description here enter image description here

gaurav5430
  • 12,934
  • 6
  • 54
  • 111

1 Answers1

1

This are all to do with the behaviors of Chrome, you can test on another site like Example.png on Wikipedia.

Chrome always treats the "thing" you opened in the address bar as document, ignoring what it really is. You can even test loading a css and it will read document.

For title, it reads download because your path is /download, you cannot change it according to this SO thread.

For caching, Chrome apparently ignores the cache when you are reloading, anything, page or image. You can try using the Wiki example.png, you will get 304 instead of "(from cache)". (304 means the request is sent, and the server has implemented ETag, if-none-match or similar technique)

Eric Wong
  • 1,388
  • 7
  • 17
  • any pointers to read more about or to confirm " Chrome apparently ignores the cache when you are reloading" – gaurav5430 Jul 05 '19 at 05:57