Heroku hosted angularjs app, i cant make the browser cache s3 images even with cache-control

i having a problem trying to enable browser caching of s3 images. I have an angularjs app deployed on Heorku. My app uses images stored in an s3 bucket. As it has many images i want the browser to request the file, store it in cache and then use the cache, but no matter what i do i cant make the browser request the file from cache. I see it requesting the file, then i reload the page and it gets the same file again.

I tried setting the following heades in my index.html:

  <meta http-equiv="Cache-Control" content="public, max-age=604800" />
  <meta http-equiv="Pragma" content="public, max-age=604800" />

But images are still not caching.

This is what i see in network panel in chrome:

**General**
RequestURL: https://localhost-mercurio.s3.amazonaws.com/1584160111310-m3r-piriapolis-letras1.jpeg
Request Method: GET
Status Code: 200 OK
Remote Address: 52.217.41.172:443
Referrer Policy: no-referrer-when-downgrade

**Response headers**
Accept-Ranges: bytes
Cache-Control: public, max-age=31536000
Content-Length: 80901
Content-Type: application/octet-stream
Date: Sat, 14 Mar 2020 04:46:38 GMT
ETag: "c5f451ebcd689f3aacee4144e80b54bf"
Last-Modified: Sat, 14 Mar 2020 04:28:34 GMT
Server: AmazonS3
x-amz-id-2: h+iya1nhpaqv/YMuqmpmVWse1JTt6HqdFzYul7SzR9BQ5wN/EyrE70VqT19j1EnmCsJKpYUllvk=
x-amz-request-id: CCEC70B9DD70C757

**Request headers**
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,es;q=0.8,it;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Host: localhost-mercurio.s3.amazonaws.com
Pragma: no-cache
Referer: http://localhost:3000/
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36

As you can see the response headers have Cache-Control: public, max-age=31536000, this is being set at the moment the image is uploaded in s3, so i imagine that by this s3 serves the file with the correct header.

The request header is where i see Cache-Control: no-cache, i think this may be reason why these images are not being cached, but im not sure and dont know how to change it, after all the docs i read i really thought the cache control had to be set on the s3 object and that would be it, is there anything im missing to make this work?

My server is a simple expressjs serving a static dist folder, the rest happens inside the angularJS app.

Any help with this would be greatly appreciated! this is something thats beyond me, too much server stuff going on that i find difficult to understand!

In case anyone asks, its angularJS and not Angular because its something i started when Angular was in beta, and once i had it working and some clients all this happened and i never got to migrate, but i plan to do it soon, i just need this to work a little longer!

Update: I tried with different ways to set the headers in express, but no matter what i do i always see the same header in the browser. I also tried to set the headers in the HTML code, thinking maaaaybe they are being read, and the nocache is making the images cache not work, but no luck there also.

What could be the reason? is this an s3 problem, a server problem, angularjs problem? i also found no way to configure how images are requested in angularjs, the only cache control i have is over the requests i send to my server, i ran out of options to try, as i dont want o think i need to spend more money for something like cloudflare, when it could be done with thinks we all already have, any help will be super appreciated!!!