Why is this GET request not being cached by the browser?

In my application I have a GET request to get images from an api endpoint.

These are the headers returned by the server for the image.

Access-Control-Allow-Origin: http://localhost:3001

Cache-Control: public, max-age=43200

Connection: keep-alive

Content-Disposition: attachment; filename=ANAESTHEIST_DOCX-page_1.jpg

Content-Length: 567829

Content-Type: image/jpg

Date: Sat, 22 Jun 2019 17:05:18 GMT

ETag: "1560511770.8223343-567829-3517588627"

Expires: Sun, 23 Jun 2019 05:05:18 GMT

Last-Modified: Fri, 14 Jun 2019 11:29:30 GMT

Server: gunicorn/19.7.1

Strict-Transport-Security: max-age=31536000; includeSubDomains

Vary: Origin

Some other useful information:

1. The GET endpoint is protected by jwt based authentication. In which case I would expect it to not be cached by default, but since the server is explicitly providing Cache-Control: public I would think this should be cached now.

2. The api endpoint has a different domain from the UI app domain. I have tried it with another server which I could make changes to, and requests being cross origin did not seem to matter for caching.

3. The image request is not sent from the browser, it is sent from the app as any other GET request. This is done because the endpoint is behind authentication.

4. Can size of the response be a factor? I wouldn't think so.

5. The UI app runs on http and the api endpoint on https. Can this be a problem?

I would expect this response to be cached for 12 hours, irrespective of user authentication, but it is not even being cached for the same user with the same token (every time I click on a button to fetch it again, I don't see any indication on Chrome network tab saying that it is fetched from disk or memory cache)

What can be the reason for this response to not be cached at all ?